:visited Pseudo-Class

CSS :visited Pseudo-Class

The CSS :visited pseudo-class selects links whose destinations have already been visited. It can help users recognize links they have previously followed and distinguish them from unvisited links.

The :visited Pseudo-Class

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

a:visited {
  color: purple;
}

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

Selecting Visited Links

The :visited pseudo-class allows previously visited links to have a different appearance from links that have not been visited.

a:visited {
  color: purple;
}

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

If the destination is recorded as visited by the browser, the link can match :visited. Otherwise, the link can match :link.

:link vs :visited

The :link and :visited pseudo-classes describe two different history states for hyperlinks.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

Using different colors for these states can help users recognize which links they have already followed.

Styling Visited Links

Browsers restrict which CSS properties can visibly change for visited links. This prevents websites from using link styles to discover information about a user's browsing history.

Color-related properties are commonly used to distinguish visited links.

a:link {
  color: #0088cc;
}

a:visited {
  color: purple;
}

Visited-link styling should remain simple and should continue to make the link clearly recognizable as interactive content.

Privacy Restrictions

Browsers intentionally limit :visited styling for privacy reasons. Authors cannot freely change every CSS property based on whether a link has been visited.

Properties that can be affected are primarily color-related properties, such as color, background-color, border-color, outline-color, and the color parts of some other properties. The alpha component of a visited color is taken from the corresponding unvisited style.

a:link {
  color: blue;
  background-color: white;
}

a:visited {
  color: purple;
  background-color: #f5f5f5;
}

Other kinds of visual changes may be ignored for :visited. These restrictions are browser security protections and should not be worked around.

Combining Link States

Visited links can also enter other interaction states such as :hover, :focus, and :active.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: green;
}

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

a:active {
  color: red;
}

When rules have equal specificity and affect the same property, their source order can determine which style is displayed. A traditional order places :link and :visited before :hover and :active.

Keeping Links Recognizable

Visited and unvisited links can look different while still sharing visual characteristics that identify both as links. For example, both states can remain underlined while using different text colors.

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

a:visited {
  color: purple;
}

Users should not have to guess whether text is a link simply because its destination has already been visited.

When to Use :visited

Use :visited when distinguishing previously visited links can help users understand where they have already been. This can be especially useful on pages containing lists of articles, resources, search results, or other groups of links.

If a visited-link distinction does not provide useful information, visited and unvisited links do not need separate author-defined styles.

Summary

The CSS :visited pseudo-class selects hyperlinks whose destinations have been visited. It can be used with :link to visually distinguish visited and unvisited links, although browsers restrict the properties that can change for privacy reasons.

The next tutorial covers the :checked pseudo-class, which selects controls such as checkboxes and radio buttons when they are checked.