:visited styles a link after the user has visited its URL. It applies only to <a> and <area> elements that have an href.
Pair it with :link for unvisited links, and keep LVHA order: :link → :visited → :hover → :active.
Browsers allow mainly color-related properties on :visited (for example color, background-color, border-*-color, text-decoration-color). Size, layout, and display changes are blocked.
Properties like background-color need a non-transparent default outside :visited, or the visited style may not show.
:visited { … }Common form: a:visited { color: …; }.
:visitedStyle unvisited links first, then visited ones, then hover/active.
<a href="…"> links.a:link (optional) then a:visited.:hover and :active after :visited.| Piece | Required? | Role |
|---|---|---|
<a href> / <area href> | Yes | Only these can be visited links |
:visited | Yes | Matches after the URL is in history |
| Color properties | Yes (practical) | What browsers allow you to change |
| LVHA order | Recommended | Keeps hover/active working as expected |
Visited links turn forest green via a:visited. Whether a URL looks visited depends on your browser history—click a link, then come back to see the change.
Each snippet focuses on :visited. Use Try It Yourself for a live editor.
Give visited links a distinct text color (MDN-style).
a:visited {
color: forestgreen;
text-decoration-color: hotpink;
}a:visited matches opened URLs.color. Text turns forest green.text-decoration-color is an allowed property.Give non-transparent defaults first, then change them for visited links.
a {
background-color: white;
border: 1px solid white;
}
a:visited {
background-color: yellow;
border-color: hotpink;
color: hotpink;
}:visited. Switch to yellow / hotpink colors.Declare link states in cascade-friendly order.
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: darkorange;
}
a:active {
color: red;
}:link. Unvisited default color.:visited. History color without blocking hover later.:hover next. Equal specificity means source order wins.:active. Press feedback stays visible while clicking.Privacy rules explain most “:visited CSS is broken” reports.
Font size, padding, display, and similar properties on :visited are ignored. Stick to the color allowlist.
getComputedStyle liesScripts always see the non-visited color. querySelector(":visited") also returns nothing usable for history sniffing.
hrefAnchors without href are not links for this purpose. The HTML <link> element never matches :visited.
If :visited comes after :hover with equal specificity, visited links may not show hover styles correctly.
Purple-on-dark or low-contrast visited colors hurt accessibility. Check both visited and unvisited states.
:visited is a browser CSS pseudo-class. Node.js, Deno, and Bun do not evaluate it.
Supported everywhere for decades. Privacy restrictions on which properties apply are also enforced in all major browsers.
Bottom line: Production-ready. Expect color-only styling and LVHA order for predictable link states.
One line: a:visited recolors opened links—within privacy limits.
Learn how to style elements while the pointer is over them.
8 people found this page helpful