Using 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 targets anchor (<a>) elements that contain an href attribute but remain “unvisited” in the browser history.

Example Usage

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

How It Works

• Targets unvisited links: If the user has not clicked the link before, :link styles apply.
• Pairs with :visited for links already clicked.
• Order matters: CSS link pseudo-classes follow the LVHA rule:
  • :link
  • :visited
  • :hover
  • :active

Example with All Pseudo-Classes

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

Notes

• Only anchors with href are affected.
• Links without href don’t respond to :link or :visited.

This pseudo-class helps maintain consistent link styling while distinguishing unvisited vs. visited states to improve UX.