Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Role of CSS :visited Selector
The CSS :visited selector is used to style links that have been visited by the user. This pseudo-class allows you to apply different styles to links based on whether they have been clicked before, providing visual feedback to users about their browsing history.
Syntax
a:visited {
property: value;
}
Example: Basic Visited Link Styling
The following example demonstrates how to style visited links with different colors and properties −
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: blue;
text-decoration: underline;
}
a:visited {
color: purple;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<p><a href="/html/index.htm">Visit HTML Tutorial</a></p>
<p><a href="/javascript/index.htm">Visit JavaScript Tutorial</a></p>
<p><a href="/python/index.htm">Visit Python Tutorial</a></p>
</body>
</html>
Three links appear: unvisited links are blue with underlines, visited links become purple, bold, and lose their underlines. On hover, all links turn red.
Example: Button-Style Visited Links
Here's an example that styles visited links as button elements −
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid blue;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 5px;
border-radius: 5px;
}
a:visited {
background-color: lightgray;
border-color: gray;
color: darkblue;
}
a:hover, a:active {
background-color: red;
color: white;
border-color: darkred;
}
</style>
</head>
<body>
<a href="/css/index.htm">CSS Tutorial</a>
<a href="/html/index.htm">HTML Tutorial</a>
<a href="/javascript/index.htm">JavaScript Tutorial</a>
</body>
</html>
Button-style links with blue borders appear. Visited links have a gray background and border, while unvisited links remain white. All links turn red on hover.
Key Points
- The
:visitedselector only works with<a>elements that have anhrefattribute - For security reasons, browsers limit which CSS properties can be applied to visited links
- Commonly allowed properties include
color,background-color, andborder-color - Properties like
font-sizeandpaddingare typically restricted to prevent privacy attacks
Conclusion
The :visited selector is essential for improving user experience by providing visual feedback about visited links. Always test your visited link styles to ensure they work across different browsers and maintain good accessibility.
Updated on: 2026-03-15T12:25:51+05:30
256 Views
Advertisements