CSS :visited Selector

Posted in CSS Tutorial

Updated on Sep 18, 2024

By Mari Selvan

👁️ 4 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The :visited selector in CSS is used to target and style links that have already been visited by the user. It is a pseudo-class that helps differentiate between visited and unvisited links, improving navigation and usability on websites. By applying specific styles to visited links, you can help users track their browsing history more easily.

💡 Syntax

The signature of the :visited Selector is as follows:

Syntax

Copied

:visited {
    /* CSS properties */
}

The :visited pseudo-class is used specifically with anchor (<a>) elements that have an href attribute.

📝 Example

Here’s an example of how to use the :visited selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :visited Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>CSS :visited Selector Example</h1>
    <a href="https://www.example.com">Visit Example.com</a><br>
    <a href="https://www.openai.com">Visit OpenAI.com</a>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for unvisited links */
a {
    color: blue;
    text-decoration: none;
}

/* Style for visited links */
a:visited {
    color: purple;
    text-decoration: underline;
}

In this example:

Unvisited links are styled with a blue color and no underline.
Visited links turn purple and have an underline for distinction.

💬 Usage Tips

The :visited pseudo-class only applies to anchor (<a>) elements with a valid href attribute. It does not affect other elements.
Due to privacy concerns, modern browsers limit the styles you can apply to :visited. You can only change certain properties like color, background-color, border-color, and outline-color.

⚠️ Common Pitfalls

Limited Styling Properties: Only specific properties can be applied to :visited links due to browser security measures. Properties like content, transform, or visibility cannot be altered for :visited links to prevent privacy leaks.
Caching Issues: Sometimes, the browser’s cache may cause unexpected behavior with :visited links, where a link appears visited when it hasn’t been recently clicked. Clearing the browser cache can solve this issue.

🎉 Conclusion

The :visited selector is a simple yet effective way to style visited links, helping users distinguish between pages they have already explored and those they haven’t. While browser security measures limit the properties that can be applied to visited links, the selector still plays an important role in enhancing website navigation and user experience.