css selectors ":visited"

The :visited CSS pseudo-class applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The :visited pseudo-class applies only <a> and <area> elements that have an href attribute.

Styles defined by the :visited and unvisited :link pseudo-classes can be overridden by any subsequent user-action pseudo-classes (:hover or :active) that have at least equal specificity. To style links appropriately, put the :visited rule after the :link rule but before the :hover and :active rules, as defined by the LVHA-order: :link:visited:hover:active. The :visited pseudo-class and :link pseudo-class are mutually exclusive.

Privacy restrictions

For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:

Note: For more information on these limitations and the reasons behind them, see Privacy and the :visited selector.

Syntax

:visited {
  /* ... */
}

Examples

Properties that would otherwise have no color or be transparent cannot be modified with :visited. Of the properties that can be set with this pseudo-class, your browser probably has a default value for color and column-rule-color only. Thus, if you want to modify the other properties, you'll need to give them a base value outside the :visited selector.

HTML

<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>

CSS

a {
  /* Specify non-transparent defaults to certain properties,
     allowing them to be styled with the :visited state */
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

See also