: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. User Avatar


  2. User Avatar
    Permalink to comment#

    Another one for the Extending :visited list.

    This was inspired by Joel’s Califa’s script and also uses localstorage to save visited pages. It reverses the concept by highlighting new/unread content (instead of read). The “New” flag can be limited to “content added in the last X days” or all time, until the visitor views it http://blog.fofwebdesign.co.uk/17-show-new-content-until-visited-link-tracking

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.