Skip to content
Related Articles

Related Articles

Improve Article
CSS :any-link Selector
  • Last Updated : 07 Sep, 2020

The :any-link selector is used to style every <a>, <area>, or <link> element that has an “href” attribute .It will skip applying CSS properties for those <a>, <area>, <href> tags in which “href” is not defined. Hence, it matches all elements that match :link or :visited.

Syntax:

:any-link{
  /*css properties*/
}

The below Examples illustrates the usage of :any-link pseudo-class selector.

Example 1:




<!DOCTYPE html>
<html>
  <head>
    <title>
      :any-link
    </title>
    <style>
        a:any-link {
        background-color: green;
        color: white;
      }
    </style>
  </head>
  <body>
    <div style="text-align: center;
        line-height: 2rem;">
        <h2 style="color: green;
            text-align: center;">
            Welcome To GeeksforGeeks
        </h2>
        <a style="text-align: center; " 
           href="https://geeksforgeeks.org">
           link to geeksforgeeks.org
        </a>
        <br>
        <a style="text-align: center;" 
           href="#">
           Internalally targeted link
        </a>
        <br>
        <a style="text-align: center;">
           It will not be styled because
           href is not defined
        </a>
    </div>
  </body>
</html>

Output:



Example 2:




<!DOCTYPE html>
<html>
  <head>
    <title>
      :any-link
    </title>
    <style>
        a:any-link {
        border: 5px solid green;
      }
    </style>
  </head>
  <body>
    <div style="text-align: center;
            line-height: 2rem;">
        <h2 style="color: green;
            text-align: center;">
            Welcome To GeeksforGeeks
        </h2>
        <h2>
          For this image any-link property
          is applied because it has href
        </h2>
        <a href="https://www.geeksforgeeks.org">
            <img alt="GeeksforGeeks" src=
            "https://media.geeksforgeeks.org/
             wp-content/uploads/20200723131450/
             img6-300x82.png" 
             width="250" height="130">
        </a>
        <br>
        <br>
        <br>
        <h2>
          For this image any-link property
          is not applied because it is not 
          having href
        </h2>
        <a>
            <img alt="GeeksforGeeks" src=
            "https://media.geeksforgeeks.org/
             wp-content/uploads/20200723131450/
             img6-300x82.png" 
             width="250" height="130">
        </a>
    </div>
  </body>
</html>

Output:

Note: Internet Explorer is not supported.

Browser supported:

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Edge



My Personal Notes arrow_drop_up
Recommended Articles
Page :