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

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

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

<a target="_blank"  href="#">Random Link</a>
<a target="_blank"  href="#id">Internal Link</a>
<a target="_blank"  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: :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 .

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 :active states of the link, and the :visited styles would apply regardless of whether the link is being hovered or clicked.

Also, the :link. The way to avoid this is to use the order specified above.

An element can be both :visited and :active).

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

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 in its entry.

Privacy issues with the :visited pseudo-class 3z6h3k

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 ’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 ’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 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 :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 ’s history through CSS :visited selectors by Mozilla’s David Baron

/* define :link styles before :visited so that they don"t override the styles defined by the latter */
a:link {
    color: skyblue;
    border-bottom: 1px solid #aaa;
}

a:visited {
    color: grey;
}

a:hover {
    border-bottom: 1px solid skyblue;
}

a:active {
    background-color: skyblue;
    color: white;
}