CSS :any-link Selector

Last Updated : 30 Aug, 2022

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:

HTML

<!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="#">
        Internally 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:

HTML

<!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:

Google Chrome 65+
Edge 79+
Firefox 50+
Opera 52+
Safari 9+

CSS :dir Selector

thacker_shahid

Improve

Article Tags :

CSS :any-link Selector

Similar Reads

Thank You!

What kind of Experience do you want to share?