:visited

:visited is a pseudo-class used to select and style visited links in a page.

Note that it will only select anchors <a> that have an href attribute.

<!-- will select any of these -->

<a href="#">Random Link</a>
<a href="#id">Internal Link</a>
<a href="http://codrops.com">External Link</a>

<!-- will not select this -->

<a>No href attribute</a>
                

Links are usually selected and styled based on their different states using one of the following pseudo-classes: :link, :visited, and :hover, and :active. Each of these pseudo-classes styles a link in a state that is specified by the pseudo-class’s name.

The :visited pseudo-class applies once the link has been visited by the user.

When the four link styling pseudo-classes are used, they are preferably used in the order mentioned above. For example:

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

The order can be easily memorized using mnemonics, like “Last Vintage Hat Available”. You can create your own one over at spacefm.com.

This order is preferred because otherwise some state styles could override other state styles, thus making them not work as expected. For example, if you were to style the :visited state last, it would override the :hover and :active states of the link, and the :visited styles would apply regardless of whether the link is being hovered or clicked.

Also, the :link pseudo-class will select all links, even those that are already styled using any of the other three pseudo-classes. So, the styles applied using :visited will be overridden by the styles applied using :link. The way to avoid this is to use the order specified above.

An element can be both :visited and :active (or :link and :active).

After some amount of time, the browser may choose to return a link from the :visited state to the initial :link state.

Trivia & Notes

In addition to the four states mentioned, you can (read: should, for better accessibility) also style links when they are focused. To do that, the :focus pseudo-class is used. And to remember the order, you could add “fur” in between the previous sentence: “Last Vintage Fur Hat Available”. You can read more about the :focus pseudo-class in its entry.

Privacy issues with the :visited pseudo-class

There is an important note to be aware of when using :visited to style visited links:

The :visited pseudo-class can, along with some scripting, be used by websites to attack and “sniff” a user’s web browsing history. In order to prevent privacy issues caused by this, modern browsers have set limitations on the kind of styles that can be applied to :visited links. These limitations help protect a user’s privacy by preventing scripts from being able to identify and retrieve links that have been visited from a web page.
The solution to this privacy issue was proposed by Mozilla’s David Baron.

Baron’s solution limits the CSS properties that can be used to style visited links to color, background-color, border-*-color, outline-color and, column-rule-color.

This means that the above properties are the only properties you can use to style :visited links that would actually work.

There’s also an “anomaly” related to the background-color applied to a link using :visited: the background color in the :visited state won’t be applied to the link unless an actual “real” background color is applied to the link prior to its visited state—that is, in its :link state.

For example, the following will not apply a background color to the visited link:

a:link {
    color: white;
    background-color: transparent; 
    /* OR */
    /* if no background color is set at all */
}

a:visited {
    color: white;
    background-color: black;
}
                

While this will set the background color on the visited links:

a:link {
    color: white;
    background-color: #eee; 
}

a:visited {
    color: white;
    background-color: black;
}
                

You can read more details about the privacy issue in the following articles:

• Limitations On Styling Visited Links by Louis Lazaris
• Preventing attacks on a user’s history through CSS :visited selectors by Mozilla’s David Baron