Pseudo class is to show different state of an element or a css selector. visited pseudo class is to show that the link is already visited.
This pseudo class is mostly being associated with link.
Syntax
a:visited { color:green;}
Let's check the actual usage of :visited pseudo class with different scenarios, as follows -
Example
Live Demo
<html>
<head>
<style>
a:visited { color:green;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>
Explanation
When you first time see the link it will be shown with normal link color (Blue) and the link will turn green if this link has been visited once.
Example
Live Demo
<html>
<head>
<style>
/* setting default style to make the style visible for :visited state */
a { background-color: white; border:1px solid white;}
a:visited {border:yellow;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>
Explanation
In this example once the link is visited it will include border of 1px yellow in color to the link.
Example
Live Demo
<html>
<head>
<style>
/* setting default style to make the style visible for :visited state */
a { background-color: white; }
a:visited { background-color: seagreen;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>
Explanation
When you visit the link once it will change the background color to seagreen.
Styling restrictions
For privacy and security reasons visited pseudo class can work with limited set of css properties such as color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color and SVG attributes are fill and stroke.
Browser compatibility
Chrome |
Firefox |
Edge |
IE |
Safari |
Opera |
1 |
1 |
Yes |
Yes |
1 |
3.5 |