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