:any-link CSS Pseudo Class
Description
The CSS :any-link pseudo-class selector matches all elements that match the :link or :visited pseudo-classes. In other words, it matches every <a> or <area> element that has an href attribute, regardless of whether it has been visited or not.
This pseudo-class can be useful for styling all links on a page in a consistent way, regardless of their visitation status. For example, you could use the :any-link pseudo-class to set a base color for all links, and then use the :hover and :active pseudo-classes to add hover and active states.
Here is an example of how to use the :any-link pseudo-class:
/* Set a base color for all links */
:any-link {
color: blue;
}
/* Add a hover state for all links */
:any-link:hover {
color: red;
}
/* Add an active state for all links */
:any-link:active {
color: green;
}
The
:any-link pseudo-class is still under development, but it is currently supported by all major browsers.Note: The
:any-link pseudo-class is not the same as the :link:not(:visited) pseudo-class selector. The :link:not(:visited) selector matches only unvisited links, while the :any-link selector matches both unvisited and visited links.
Syntax
:any-link {
/* ... */
}
Example
<a href="https://example.com">External link</a><br />
<a href="#">Internal target link</a><br />
<a>Placeholder link (won't get styled)</a>a:any-link {
border: 1px solid blue;
color: #800000;
}Browser Support
The following table will show you the current browser support for the CSS :any-link pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 79 | 65 | 50 | 52 | 9 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 65 | 50 | 47 | 9 | 9 | 65 |
Last updated by CSSPortal on: 1st October 2023