CSS - Pseudo-class :any-link

The :any-link pseudo-class in CSS represents an element that is the source anchor of a hyperlink, irrespective of whether it has been visited or unvisited. Thus, it matches all the <a> or <area> element that has href attribute. In short, it also matches all the elements that match :link or :visited.

This is not supported on safari browser.

Syntax

:any-link {
   /* ... */
}

CSS ;any-link Example

This following example demontrates the usage of :any-link pseudo-class, used with :hover, which changes the color of the text of the link on hover.

The styling through :any-link pseudo-class is not applied on the anchor element without an href attribute.

<html>
<head>
<style>
   div {
      padding: 5px;
      border: 2px solid black;
      margin: 1em;
      width: 500px;
   }
   a:any-link {
      font-weight: 900;
      text-decoration: none;
      color: green;
      font-size: 1em;
   }
   .with-nohref {
      color: royalblue;
   }

   :any-link:hover {
      color: crimson;
   }
</style>
</head>
<body>
   <h3>:any-link example</h3>
   <div>
      anchor elements with href to tutorialspoint.com--
      <a href="https://tutorialspoint.com">click here</a>
   </div>
   <div>
      <a class="with-nohref">with no href</a>
   </div>
   <div>
      <a href="" class="">with empty href</a>
   </div>
</body>
</html>
Advertisements