CSS :link Pseudo-Class

CSS :link Pseudo-Class

The CSS :link pseudo-class selects hyperlinks that have not been visited. It allows developers to define the appearance of unvisited links separately from visited links and other interactive link states.

:link Syntax

selector:link {
  property: value;
}

The :link pseudo-class is added directly to a selector without a space. It matches an unvisited hyperlink.

Basic Example

a:link {
  color: #006699;
}

This rule sets the text color of unvisited links to blue.

Background Color Example

a:link {
  background-color: #eaf6fc;
}

This rule applies a light blue background to unvisited links.

Class Selector Example

a.navigation:link {
  text-decoration: none;
}

This rule removes the underline from unvisited links with the navigation class.

How :link Works

The :link pseudo-class matches a hyperlink when the browser treats its destination as unvisited.

HTML Example

<a href="https://example.com/">Visit Example.com</a>

CSS Example

a:link {
  color: #006699;
  text-decoration: underline;
}

The link uses these styles while the browser considers its destination unvisited.

Browser History

The browser determines whether a link is visited using its history and privacy rules. The :link pseudo-class does not directly inspect or modify browser history.

Visited Links

Once a destination is treated as visited, the link no longer matches :link and may match :visited instead.

Interactive States

An unvisited link can also match pseudo-classes such as :hover, :focus-visible, and :active while the corresponding interaction occurs.

Elements That Match :link

In HTML, the :link pseudo-class applies to hyperlinks created with supported linking elements.

Anchor Elements

<a href="https://example.com/">Example Website</a>

An <a> element with an href attribute can match :link when its destination is unvisited.

Area Elements

<area shape="rect" coords="0,0,100,100" href="https://example.com/" alt="Example Website">

An <area> element with an href attribute can also represent a hyperlink and match :link.

Anchor Without href

<a>This is not a hyperlink.</a>

This anchor does not match :link because it does not have an href attribute.

Other Elements

Ordinary elements such as paragraphs, headings, and buttons do not match :link simply because they look or behave like links.

:link vs. :visited

The :link and :visited pseudo-classes distinguish hyperlinks based on whether their destinations are treated as visited.

Comparison

CSS Example

a:link {
  color: #006699;
}
a:visited {
  color: #663399;
}

Unvisited links appear blue, while visited links may appear purple.

Mutually Exclusive States

A hyperlink does not match both :link and :visited at the same time.

Privacy Restrictions

Browsers restrict which CSS properties can differ between visited and unvisited links to protect browsing history. These restrictions primarily affect :visited.

:link vs. :any-link

The :any-link pseudo-class matches hyperlinks regardless of whether they have been visited.

Comparison

CSS Example

a:any-link {
  text-decoration: underline;
}
a:link {
  color: #006699;
}
a:visited {
  color: #663399;
}

All hyperlinks receive an underline, while the text color depends on their visited state.

Choosing Between Them

Use :link for unvisited links. Use :any-link when the same rule should apply to both visited and unvisited links.

Link States and CSS Order

Links can match several pseudo-classes depending on their visited state and user interaction.

Common Link States

LVHA Order

a:link {
  color: #006699;
}
a:visited {
  color: #663399;
}
a:hover {
  color: #cc6600;
}
a:active {
  color: #cc3333;
}

The traditional LVHA order places :link, :visited, :hover, and :active rules in that sequence. This helps later interaction rules override earlier link-state rules when specificity and other cascade factors are equal.

Keyboard Focus

a:focus-visible {
  outline: 2px solid #006699;
  outline-offset: 2px;
}

The :focus-visible pseudo-class can provide a clear focus indicator for keyboard users. It does not need to be part of the traditional LVHA sequence.

The href Attribute

In HTML, the href attribute identifies a hyperlink destination.

External Link

<a href="https://example.com/">External Website</a>

Internal Link

<a href="/contact.html">Contact Page</a>

Fragment Link

<a href="#details">Jump to Details</a>

These anchors represent hyperlinks and can match :link when the browser treats their destinations as unvisited.

Email Link

<a href="mailto:info@example.com">Send an Email</a>

Links using non-HTTP schemes, such as mailto:, are still hyperlinks. Their visited-state treatment can vary by browser.

Empty href Attribute

<a href="">Current Document</a>

An empty href attribute still creates a hyperlink. It resolves to the current document's URL and may be treated as visited.

:link Specificity

The :link pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Specificity Example

a {
  color: #333;
}
a:link {
  color: #006699;
}

When both selectors match and other cascade factors are equal, the :link rule takes precedence because it has greater specificity.

Practical Uses

The :link pseudo-class is useful for controlling the appearance of unvisited hyperlinks.

Default Link Color

a:link {
  color: #006699;
}

Define a consistent color for unvisited links.

Navigation Links

nav a:link {
  color: #006699;
  text-decoration: none;
}

Style unvisited navigation links separately from visited links.

Content Links

article a:link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

Make unvisited links in article content easy to recognize.

Link Backgrounds

a.button-link:link {
  background-color: #eaf6fc;
  color: #006699;
}

Apply a background and text color to unvisited links styled as buttons.

Visited-State Distinction

Combine :link and :visited when users should be able to distinguish previously visited destinations from unvisited ones.

Limitations

The :link pseudo-class depends on hyperlink status and browser history behavior.

Only Hyperlinks Match

An anchor without an href attribute does not match :link.

Visited State Is Browser-Dependent

The browser determines whether a destination is treated as visited. The result may vary with history settings and privacy features.

Not a Hover Selector

The :link pseudo-class does not indicate pointer interaction. Use :hover for hover styling.

Not a Focus Selector

The :link pseudo-class does not indicate keyboard focus. Use :focus-visible for an appropriate focus indicator.

History Privacy Restrictions

Browsers restrict visited-link styling and access to visited-state information to prevent websites from discovering browsing history.

No Guarantee of an Unvisited Result

A link used in an example may already be considered visited. Its appearance can differ depending on the user's browsing history.

Accessibility

Links should remain easy to identify and use regardless of their visited state.

Recognizable Links

Use underlines or another clear visual indicator so links are not identified by color alone.

Sufficient Contrast

Choose link colors that provide sufficient contrast against the background.

Keyboard Focus

a:focus-visible {
  outline: 2px solid #006699;
  outline-offset: 2px;
}

Provide a visible focus indicator for users navigating with a keyboard.

Descriptive Link Text

Use meaningful link text that describes the destination or action.

Consistent States

Keep hover, focus, active, and visited styles visually consistent while preserving meaningful distinctions.

Best Practices

• Use :link when styling unvisited hyperlinks separately from visited links.
• Use :any-link for styles shared by visited and unvisited links.
• Use :visited when a visual distinction for visited links is useful.
• Follow the traditional LVHA order when defining link-state colors with equal specificity.
• Include :focus-visible styling for keyboard accessibility.
• Keep links recognizable without relying on color alone.
• Use sufficient contrast for every link state.
• Remember that an anchor without href is not a hyperlink.
• Do not rely on browser history to produce a particular appearance in demonstrations.

:link Example

This example shows three links and one anchor without an href attribute. The :link pseudo-class styles unvisited hyperlinks, while :visited provides a separate color for visited destinations.

HTML

<div class="link-demo">
  <p><a href="https://example.com/">Example Website</a></p>
  <p><a href="https://www.w3.org/">W3C Website</a></p>
  <p><a href="https://developer.mozilla.org/">MDN Web Docs</a></p>
  <p><a>Anchor Without href</a></p>
</div>

CSS

.link-demo a:link {
  color: #006699;
  text-decoration: underline;
  font-weight: bold;
}
.link-demo a:visited {
  color: #663399;
}
.link-demo a:hover {
  color: #cc6600;
}
.link-demo a:active {
  color: #cc3333;
}
.link-demo a:focus-visible {
  outline: 2px solid #006699;
  outline-offset: 2px;
}

Browser Result

Play in Editor

Note: Unvisited hyperlinks appear blue and bold. Links treated as visited may appear purple. The anchor without an href attribute does not match either :link or :visited.

Browser Support

Baseline: Widely available. The :link pseudo-class is supported in Chrome, Edge, Firefox, Safari, and other major browsers.

For current compatibility information, visit Can I Use? .

Specifications

The :link pseudo-class is defined in CSS Selectors Level 4 as a link history pseudo-class. It matches hyperlinks whose destinations are not treated as visited.

Selectors Level 4 - Link History Pseudo-Classes