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
Usage of :link pseudo-class in CSS
The :link pseudo-class is used to add special style to an unvisited link. This pseudo-class targets anchor elements that have an href attribute and have not been visited by the user yet.
Syntax
a:link {
property: value;
}
Possible Values
You can apply any CSS property to :link, but commonly used properties include:
| Property | Description |
|---|---|
color |
Sets the text color of the unvisited link |
text-decoration |
Controls underlining, overlining, or strike-through |
background-color |
Sets the background color of the link |
font-weight |
Controls the thickness of the link text |
Example: Basic Link Styling
The following example styles unvisited links with a black color −
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: #000000;
text-decoration: none;
font-weight: bold;
}
a:link:hover {
color: #ff6600;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Visit our <a href="/html/index.htm">HTML Tutorial</a> to learn more.</p>
<p>Check out the <a href="/css/index.htm">CSS Guide</a> as well.</p>
</body>
</html>
Two paragraphs appear with black, bold, undecorated links. When you hover over the links, they turn orange with underlines. The links remain black since they are unvisited.
Example: Multiple Link States
This example demonstrates the difference between :link, :visited, :hover, and :active pseudo-classes −
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: #0066cc;
background-color: #f0f8ff;
padding: 5px;
border-radius: 3px;
}
a:visited {
color: #800080;
background-color: #faf0ff;
}
a:hover {
color: #ff3300;
background-color: #fff0f0;
}
a:active {
color: #ffffff;
background-color: #ff6600;
}
</style>
</head>
<body>
<p><a href="/javascript/index.htm">JavaScript Tutorial</a></p>
<p><a href="/python/index.htm">Python Tutorial</a></p>
<p><a href="/java/index.htm">Java Tutorial</a></p>
</body>
</html>
Three links appear with blue text and light blue backgrounds (unvisited state). Hovering changes them to red with pink backgrounds. Clicking changes them to white text with orange backgrounds. Once visited, links become purple with light purple backgrounds.
Conclusion
The :link pseudo-class specifically targets unvisited links, making it essential for creating distinct visual states. Always combine it with other link pseudo-classes for a complete user experience.
Updated on: 2026-03-15T11:25:50+05:30
103 Views
Advertisements