How does the :visited pseudo-class work for links?

Q: How does the :visited pseudo-class work for links?

The `:visited` pseudo-class in CSS applies styles to links (` ` elements) that the user has previously visited. This allows designers to visually differentiate between links that have been clicked and those that haven't. /* Unvisited links */ a:link { color: blue; text-decoration: none; } /* Visited links */ a:visited { color: purple; } Example Link In this example, links that the user has not visited appear blue, while visited links appear purple. Use `:visited` to provide visual cues about link history, improving navigation experience. Browsers restrict which CSS properties can be applied to `:visited` for privacy reasons (e.g., color changes are allowed, but background images are typically blocked). Combine `:visited` with `:hover` and `:active` for consistent interactive feedback. Test link styling across browsers, as some may handle visited links differently to prevent history leakage.

Difficulty: 5/10

CSS selectors, privacy restrictions, browser rendering

Understanding the :visited Pseudo-Class

The :visited pseudo-class in CSS applies styles to links (<a> elements) that the user has previously visited. This allows designers to visually differentiate between links that have been clicked and those that haven't.

Example: Using :visited

In this example, links that the user has not visited appear blue, while visited links appear purple.

Best Practices and Limitations

1
Use :visited to provide visual cues about link history, improving navigation experience.
2
Browsers restrict which CSS properties can be applied to :visited for privacy reasons (e.g., color changes are allowed, but background images are typically blocked).
3
Combine :visited with :hover and :active for consistent interactive feedback.

Scenario Questions

0-2 years experience

2-5 years experience

1We have a component that conditionally adds a class to links based on whether they’re internal or external. After deploying, the visited styling stopped working on some pages. Walk me through how you would debug this.

Follow-up Questions