A pseudo-class adds a condition to a CSS selector. Write a single colon followed by the condition, as in a:hover. The rule applies when the element is in that state, without needing a separate class in the HTML. section 1.6.3
Links make the states easy to see:
- :link and :visited distinguish URLs absent from or present in browser history. section 1.6.3
- :hover matches a pointer over an element; :active matches while it is being clicked and held. section 1.6.3
- :focus matches the element receiving keyboard events. :focus-within can style its parent, while :focus-visible targets keyboard-related focus. section 1.6.3
Give links visible states
An article’s links otherwise keep their browser-default appearance. Set colors with a:link, a:visited, and a:hover, then give a:focus an outline so the focused link is distinct. Browser developer tools can display these states while you check the result. section 1.6.3
Listing 1.10 Styling links using pseudo-elements
a:link {
color: #1D70B8;
}
a:visited {
color: #4C2C92;
}
a:hover {
color: #003078;
}
a:focus {
outline: solid 1px crimson;
}
Compare the four short link rules: each changes the same element according to its current state. section 1.6.3
A condition can also be structural. In an SVG loader, rect:nth-child(1) selects the first rectangle so it can receive its own fill color; successive positions give the bars different colors. If a page has other SVG rectangles, a more specific selector can keep the rule from styling the wrong graphic. section 3.3
Select the form fields you want
Use input:not([type="radio"], [type="checkbox"]) to style inputs other than radio buttons and checkboxes. This avoids adding a class to every matching field in a large form. section 10.3.1
Pseudo-classes also affect which rule wins: in a specificity calculation, they have the same value as class and attribute selectors, above type selectors and pseudo-elements. section 1.5
