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; "
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 >
< img alt = "GeeksforGeeks" src=
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=
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+
Last Updated :
30 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...