:link Pseudo-Class

CSS :link Pseudo-Class

The CSS :link pseudo-class selects links that have not yet been visited. It is commonly used to define the appearance of unvisited links separately from links whose destinations have already been visited.

The :link Pseudo-Class

The :link pseudo-class is added directly to a selector with no space between the selector and the colon.

a:link {
  color: blue;
}

The selector a:link matches an <a> element that represents a link whose destination has not been visited.

Selecting Unvisited Links

The :link pseudo-class allows unvisited links to have their own appearance. For example, you can give unvisited links a specific text color and underline.

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

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

If the destination has not been visited, the link matches :link and receives the styles defined by the rule.

The href Attribute

For an <a> element to represent a hyperlink, it needs an href attribute. An <a> element without href does not match :link.

<a href="/contact.html">This is a link</a>
<a>This is not a hyperlink</a>

The first <a> element can match :link or :visited depending on its history state. The second does not represent a hyperlink and does not match either of those pseudo-classes.

:link vs :visited

The :link and :visited pseudo-classes distinguish links according to whether their destinations have been visited.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

These rules allow visited and unvisited links to be visually distinguished. The next tutorial covers the :visited pseudo-class in more detail.

Combining Link States

A link can also match interaction pseudo-classes such as :hover, :focus, and :active. These states can be styled along with :link and :visited.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: green;
}

a:focus {
  outline: 2px solid #0088cc;
}

a:active {
  color: red;
}

Each rule describes a particular state of the link. More than one pseudo-class can apply to a link at the same time, so the cascade and source order can affect the final appearance.

Ordering Link State Rules

When link-state rules use selectors with equal specificity and set the same CSS properties, rules that appear later can override earlier ones. A traditional ordering is :link, :visited, :hover, and :active.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: green;
}

a:active {
  color: red;
}

This order allows the hover and active styles to take precedence when those interaction states apply. Focus styling can also be included where appropriate and should remain clearly visible during keyboard navigation.

Keeping Links Recognizable

Links should remain visually distinguishable from surrounding text. Color can help identify links, but an underline or another clear visual treatment can make their purpose easier to recognize.

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

When changing the browser's default link styles, make sure the new styles continue to clearly communicate that the text is interactive.

When to Use :link

Use :link when you want to style unvisited links separately from visited links. It is useful when the visited state provides meaningful visual information to users navigating through a group of links.

If visited and unvisited links should have the same appearance, a regular selector such as a may be sufficient instead of defining separate :link and :visited rules.

Summary

The CSS :link pseudo-class selects hyperlinks whose destinations have not been visited. It can be used with :visited and interaction pseudo-classes such as :hover, :focus, and :active to define the appearance of different link states.

The next tutorial covers the :visited pseudo-class and how CSS can distinguish links whose destinations have already been visited.