Cascade FallsISSUE #31 of 33

links · the four states · hover · visited · active

StylaVSThe Specificity Sphinx

Styla saysLinks have four states — link, visited, hover, active — styled with pseudo-classes in that order.

Style links by state: :link (unvisited), :visited, :hover, :active. The mnemonic LVHA keeps the cascade order correct. Add :focus-visible for keyboard users. Don't rely on color alone to signal a link.

Power-ups you unlock

:link :visited :hover :active (order: LVHA)
Add :focus-visible for keyboard users
Privacy limits what :visited can style
Don’t signal links by color alone

The Specificity Sphinx attacks — common mistakes

Wrong pseudo-class order breaking hover/active
Only color to distinguish links
Forgetting focus styles for keyboard nav

Boss battleStyle all four link states plus focus-visible, keeping an underline affordance.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>a:link{color:#8aff9d}a:visited{color:#b388ff}a:hover{text-decoration:underline}a:active{color:#ff7a8a}</style></head><body style="background:#06040d;padding:20px"><a href="#">a styled link</a></body></html>

▶ Open the interactive comic issue

‹ Icon Fonts · @Font-Face Icon Kits Lists · Marker · Style-Type · Style-Image ›