:visited

Avatar of Sara Cope
Sara Cope on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

The:visited pseudo-class selector can change some of the styling on an anchor link (<a>) element if the user’s browser has already visited the link. It’s meant to help users distinguish the difference between links they have and haven’t visited.

a:visited {
  color: gray;
}

Limitations and usage

There is some privacy concern about :visited, namely that a malicious website could have links to tons of websites with :visited styling, then test the visual style of the links with JavaScript to report back to a server which sites the user has visited. This violates the user’s privacy and could potentially reveal personally-identifying information.

As a result, most browsers restrict what styling can be changed on :visited links, and what styling information can be reported with the getComputedStyle method.

This is a good run-down of that situation.

These are the properties that can be changed with :visited:

You can only use :visited to change those properties if the link already has them in the “unvisited” or :link state. You can’t use it to add properties that aren’t already present on the link. For example:

You can change the background-color of a :visited link if the link element already had a background color.

You can’t add a background-color to a :visited link if it did not have a background color when it was an “unvisited” link.

It’s also useful to know that most of the link pseudo-classes should be declared in a specific order. The order is:

  1. Link
  2. Visited
  3. Hover
  4. Active

If you’re including :focus styling for your link, it’s common to add it between “hover” and “active”.

Demo

Extending :visited

Though direct styling for :visited links is limited, there are lots of clever ways to extend your options for styling visited links. In 2015 there was a bumper crop of blog posts sharing new ideas for styling :visited links:

Revisiting :visited, from Joel Califa, shows an example of using localstorage to style visited, in-domain links.

Hacking :visited, from Una Kravets, turns :visited on its head by adding an “unvisited” tag as :after content to links, which is then hidden with a background color swap after the link is visited.

Pushing the limits of :visited with CSS blend modes, from Stelian Firez, combines a little HTML trick attributed to DuckDuckGo and background-blend-mode: screen; to fade a custom icon next to a visited link.

Styling Visited Links with SVG, from Dudley Storey. Uses SVG images with fill set to match the page’s background color when the link is in the :link state, then to another color after the link is :visited. The tutorial also includes an alternate method using Unicode characters instead of SVG.

Browser support

All browsers support this.

More information