:visited CSS Pseudo Class

The :visited pseudo-class in CSS is used to style links that the user has previously visited. It applies specifically to anchor elements that have an href attribute and whose URLs are present in the browser’s history. This pseudo-class allows developers to visually distinguish links that have been interacted with, providing users with contextual information about which links they have already explored.

A key consideration with :visited is privacy. Browsers limit the styles that can be applied to visited links to prevent history-sniffing attacks. Typically, only the following properties are safely allowed: color, background-color, border-color, and some text decoration properties. Properties such as position, width, height, and content are ignored for visited links for security reasons.

Using :visited alongside other pseudo-classes like :hover or :active can create interactive link effects. For example, you can have a link change color when hovered over, but only if it has been visited:

<a href="https://example.com">Example Link</a>

a:visited {
    color: purple;
}

a:hover {
    color: orange;
}

In this example, the link will appear purple if it has been visited, and when hovered, it will turn orange regardless of its visited state. The :visited pseudo-class is an important tool in designing intuitive navigation, helping users recognize their browsing history while maintaining user privacy.

It’s also worth noting that the order of pseudo-classes in CSS matters. To ensure proper behavior, the recommended sequence is: :link, :visited, :hover, and :active - often remembered by the mnemonic LVHA.