CSS :visited Pseudo Class
The :visited selector selects and styles visited links in the page.
The :visited pseudo-class applies when the link has been visited by the user.
If we try to add style to the visited links by giving them a style property (e.g., background-image) it will not work in modern browsers. But the style properties will work properly if we use any other pseudo-class.
The styles that are modified using this selector are very limited. Browsers allow the following styles:
- color
- background-color
- border-color
- outline color
- column-rule-color
- the color parts of fill and stroke
There is an option for web browsers to ignore the rule styles for the :link and :visited pseudo-classes because the :visited pseudo-class can be abused and it will be possible to get information from the visitor’s browser history.
Version ¶
Selectors Level 4
Selectors Level 3
Syntax¶
:visited {
css declarations;
}Example of the: visited selector:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
display: block;
padding: 5px;
}
a:visited {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>:visited selector example</h2>
<a href="https://www.web.com">W3docs</a>
<a href="https://stackdev.io/">Stackdev</a>
</body>
</html>Example of the: visited selector with the unvisited, visited, hover, and active links:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
}
/* unvisited link */
a:link {
color: #cccccc;
}
/* visited link */
a:visited {
color: #1c87c9;
}
/* mouse over link */
a:hover {
color: #8ebf42;
}
/* selected link */
a:active {
color: #666666;
}
</style>
</head>
<body>
<h2>:visited selector example</h2>
<p>Visit our
<a href="https://www.web.com/">website</a>.
</p>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji