W3docs
en
Log in

CSS :visited Pseudo Class

The :visited CSS pseudo-class selects and styles already visited links. Read about the pseudo-class and practice with examples.

The :visited pseudo-class targets links (<a> elements with an href) that the user has already visited. You use it to give visited links a different appearance from unvisited ones — a classic UX cue that tells readers which pages they've already opened.

This page covers what :visited matches, the strict (and unusual) limits browsers place on what you can style with it, why those limits exist, and how to combine it with the other link states in the correct order.

a:visited {
  color: #8ebf42;
}

How it works

A link is "visited" when its destination URL is in the browser's history. The browser applies :visited styles automatically — there's no JavaScript or markup involved. As soon as the user clicks through (or has visited the URL before), the matching link switches to its visited style.

Only <a> elements with an href attribute can match :visited. An anchor with no href (e.g. <a>text</a>) is treated as a placeholder and never matches :link or :visited.

Why you can only style a few properties

Historically, :visited could change almost any property. That turned out to be a serious privacy hole: a page could lay out thousands of off-screen links and use getComputedStyle (or layout side effects) to detect which ones rendered as "visited" — effectively reading parts of the user's browsing history without permission.

To close that hole, modern browsers restrict :visited to color-only properties and lie about the computed style so scripts can't detect the difference. That's why setting something like a background-image or changing the box size on :visited silently does nothing.

The properties browsers still allow on :visited:

Two extra rules make these safe:

  • The change must come from :visited directly; you can't, for example, make the link transparent on :link and reveal a background only on :visited.
  • You cannot use rgba()/hsla() with partial transparency to leak the state, and the alpha channel is effectively ignored.

If you need richer styling that depends on link state, apply it to a state that isn't :visited — such as :link, :hover, or :focus.

The LVHA order

When you style all four link states, the order of the rules matters because of CSS specificity ties. The convention is Link, Visited, Hover, Active (remembered as "LoVe HAte"):

a:link    { color: #1c87c9; }  /* unvisited */
a:visited { color: #8ebf42; }  /* visited   */
a:hover   { color: #666666; }  /* mouse over */
a:active  { color: #cc0000; }  /* being clicked */

If you put :hover before :visited, a visited link would never show its hover color, because the later, equally specific :visited rule would win.

Version

Selectors Level 4

Selectors Level 3

Syntax

CSS :visited syntax

:visited {
  css declarations;
}

Example of the :visited selector:

CSS :visited code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        display: block;
        padding: 5px;
      }
      a:visited {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <a href="https://www.w3docs.com">W3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>
Try it Yourself »

:visited code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 20px;
      }
      /* unvisited link */
      a:link {
        color: #cccccc;
      }
      /* visited link */
      a:visited {
        color: #1c87c9;
      }
      /* mouse over link */
      a:hover {
        color: #8ebf42;
      }
      /* selected link */
      a:active {
        color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <p>Visit our
      <a href="https://www.w3docs.com/">website</a>.
    </p>
  </body>
</html>
Try it Yourself »
  • :link — styles links that have not been visited yet.
  • text-decoration — commonly paired with link states to add or remove underlines.

Practice

Practice
What does the :visited selector in CSS do?
What does the :visited selector in CSS do?
Was this page helpful?