CSS :link Pseudo-class

Definition and Usage

The :link pseudo-class matches a hyperlink that has not been visited yet.

In practice that means an <a> (or <area>) with an href that is not in the browser’s history. It is mutually exclusive with :visited. For all links regardless of history, use :any-link.

CSS Syntax

Example: a:link { color: forestgreen; }

Selector Forms

How to Use :link

Target unvisited links first, then layer visited and interaction states.

1. Ensure the element is a real hyperlink (href present).
2. Write a:link { … } for the unvisited look.
3. Add :visited, :hover, and :active after it (LVHA).
4. Prefer properties browsers still allow on visited links (for privacy) when styling both states.

Live Preview

Fresh URLs usually match a:link. The placeholder without href never matches. Toggle the style on/off.

CSS Examples

Each snippet focuses on :link. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  a:link {
    color: forestgreen;
    text-decoration-color: hotpink;
  }
</style>

<p><a href="https://example.com/a">Demo link A</a></p>
<p><a href="https://example.com/b">Demo link B</a></p>

<style>
  a:link {
    background-color: gold;
    color: green;
  }
</style>

<a href="#ordinary-target">Ordinary link</a><br>
<a>Placeholder link (won't get styled)</a>

<style>
  a:link { color: #1d4ed8; }
  a:visited { color: #7c3aed; }
  a:hover { color: #dc2626; }
  a:active { color: #ea580c; }
</style>

<a href="https://example.com/lvha-demo">Hover and click me</a>

Key Takeaways