any-link
The :any-link is CSS pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.
It means that it matches all elements that match :link or :visitied.
.a:any-link {
color: red;
text-decoration: none;
}
.area:any-link {
color: red;
text-decoration: none;
}
:any-link {
color: red;
text-decoration: none;
}
:any-link can be used with <a>, <link>, and <area> Tag.
Any <a>, <link>, or <area> tags which contains href attribute will be displayed red color without text-decoration.
Otherwise, it
If you just type :any-link selector without tag or class, it reflects both <a>, <link>, and <area> tag.
<a href="https://google.com">Href</a>
<a>No href</a>
<a href>Href without value</a>
<a href="">Href with Empty string value</a>
All <a> tags along with href attribute will be affected nonetheless attribute has any link string or empty string even it's undefined.
:any-link is very useful and can replace codes with :matches() pseudo-class like following code.
:matches(:link, :visited)
Use other selectors at the same time
You also can use with other selectors such as :active and :hover.
:any-link:active { color: green }
:any-link:hover { color: blue }
Differences between :any-link and :link
:link is also one of pseudo-class selector and used for link elements like <a>, <link>, and <area>.
:any-link is activated regardless of your visit. On the other hand, :link only works for the link that you have never visited.
:any-link { color: green }
.link-1:any-link { color: red }
.link-2:link { color: blue }
<a class="link-1" href="https://google.com">Red</a>
<a class="link-2" href="https://google.com">Blue</a>
<a> tag with class link-2 will be changed to green once you visit the link.
Test the codes
Check out the output.