CSS :any-link - Apply Styles to All or Specific Links

Introduction

CSS :any-link is a pseudo-class that selects all or specific links on a webpage, regardless of their status (visited, unvisited, active, or hover). This tutorial will cover the basics of using :any-link and provide multiple examples of how to use it in different contexts.

Using :any-link

To use :any-link, you simply need to include it in your CSS selector, like this:

:any-link {
    /* styles here */
}

:any-link Examples

In this section, we will provide several examples of how to use :any-link in different contexts. These examples will include basic usage, such as changing the color of all links, as well as more advanced techniques like adding hover effects and targeting specific types of links. By the end of this section, you will have a solid understanding of the different ways :any-link can be used to style links on your webpage.

Example 1: Changing the color of all links

This example will change the color of all links on the webpage to green.

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

:any-link {
    color: green;
}

Output:

See the Pen :any-link ex-1 by Vinish Kapoor (@foxinfotech) on CodePen.

Example 2: Adding a hover effect to all links

This example will change the color of all links to red and add an underline when the user hovers over a link.

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

:any-link {
    color: red;
    text-decoration: none;
}
:any-link:hover {
    text-decoration: underline;
}

Output:

See the Pen :any-link ex-2 by Vinish Kapoor (@foxinfotech) on CodePen.

Example 3: Applying styles to only external links

This example will change the color of all links that start with "http" to red. This effectively targets only external links.

<a href="#">Link 1</a>
<a href="https://www.example.com">External Link</a>

:any-link[href^='http'] {
    color: red;
}

Output:

See the Pen :any-link ex-3 by Vinish Kapoor (@foxinfotech) on CodePen.

Example 4: Applying styles to links within a specific div

This example will change the color of all links within the div with the ID "container" to green.

<div id="container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</div>
<a href="#">Link 3</a>

#container :any-link {
    color: green;
}

Output:

See the Pen :any-link ex-4 by Vinish Kapoor (@foxinfotech) on CodePen.

Browser Support

Conclusion

CSS :any-link is a powerful tool for selecting all or specific links on a webpage and applying styles to them. By using :any-link in combination with other CSS selectors and pseudo-classes, you can create complex and dynamic styling for your links. Remember to test your code in multiple browsers and devices to ensure compatibility.

FAQ