Get a free trial // Grow your CSS skills // Land your dream job


Last updated on:

:visited is a pseudo-class selector that 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.

Link Pseudo-Classes in Order

It's also useful to know that most of the link pseudo-classes should be declared in a specific order. The order is: Link, Visited, Hover, Active. If you're including :focus styling for your link, it's common to add it between "hover" and "active".


See the Pen :visited Demo by CSS-Tricks (@css-tricks) on CodePen.

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.


More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
All All All All 6+ All All


  1. sda


Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed