What is the visited selector in CSS?

There are different types of CSS selectors for different purposes, one of which is the :visited CSS selector.

This is a location pseudo-class selector, which means it relates to links, and to targeted elements within the current document.

The CSS :visited selector enables the styling of links that have been visited by the user.

Syntax

The syntax is as follows:

css-selector:visited {
    // CSS rules
}

The CSS selector can either be a class, ID, or HTML attribute. The :visited keyword matches links that have been visited by the user.

Use cases of :visited selector.

For privacy reasons, browsers limit which styles you can apply to the :visited selector, and how they can be used.

Some of the CSS properties that can be changed with the :visited selector are:

• color
• background-color
• border (and its sub-properties)
• outline-color
• fill and stroke properties for SVGs.

Code

From the example above, using the :visited selector the color of the link text is changed once the user visits the site.

Similar to the other example above, In this example the border of the a tag is set to change once the link has been visited.

The :visited selector enables users to distinguish the difference between links they have and haven’t visited.

Order of link pseudo-classes

It is important to note that in styling link-related pseudo-classes, the order must be followed to avoid case scenarios where the styles might be overridden.

The CSS style for each pseudo-class must be placed in this order, respectively:

1. :link

2. :visited

3. :hover

4. :active

The CSS :visited selector is also supported by all browsers.