These pseudo-classes react to links, pointer and keyboard interaction, and the URL fragment. All weigh 0-1-0.
| Selector | Matches |
|---|---|
| :link / :visited | Unvisited / visited links that have an href |
| :hover / :active | Element under the pointer / being pressed |
| :focus / :focus-visible | Focused / focused and the browser would draw a ring |
| :focus-within / :target | Contains the focus / id equals the URL fragment |
a:link { color: #1565c0; } a:visited { color: #6a1b9a; }
a:hover { text-decoration-thickness: 3px; } a:active { color: #c62828; }
:focus-visible { outline: 3px solid #ef6c00; outline-offset: 2px; }
.field:focus-within { background: #e3f2fd; } /* whole label + input group */
section:target { border-left: 6px solid #2e7d32; } /* page.html#terms marks #terms */Keep link states in LVHA order: they tie on specificity, so the later rule wins, and :active must follow :hover to show. Draw focus rings with :focus-visible (Baseline widely available) so keyboard users always get one and mouse users are not shown one after every click. To stop pages sniffing history, browsers honor only color properties under :visited.