How to Use the CSS :link Pseudo-Class

The :link pseudo-class in CSS is used to style links that have not yet been visited by the user. It specifically targets anchor (<a>) elements that have an href attribute, but which the browser considers "unvisited."

Example Usage:

css

1 a:link {
2   color: blue; /* Unvisited link color */
3   text-decoration: none; /* Remove underline */
4 }

How It Works:

Targeting Unvisited Links: The :link pseudo-class applies styles to links that the user has not clicked or visited. After visiting, the :visited pseudo-class is used instead.
Order of Pseudo-Classes: When using multiple pseudo-classes (like :hover, :active, and :visited), CSS has a recommended order for link styling:
- :link (unvisited link)
- :visited (visited link)
- :hover (when the link is hovered over)
- :active (when the link is being clicked)

Example with multiple pseudo-classes:

css

1 a:link {
2   color: blue;
3 }
4 
5 a:visited {
6   color: purple;
7 }
8 
9 a:hover {
10   color: red;
11 }
12 
13 a:active {
14   color: green;
15 }

Important Notes:

The :link pseudo-class only applies to anchor elements (<a>) with an href attribute.
Without href, links won’t be affected by :link or :visited

This allows you to style links consistently across your site while providing a clear visual difference between visited and unvisited links.