State pseudo-classes: hover, focus, active, checked, disabled
Click the button with the mouse: no orange ring. Press Tab to reach it: the ring appears. That difference is :focus-visible. Untick the box and the label loses its bold.
Pseudo-classes start with one colon and match elements by their state (hovered, focused, checked, disabled, visited) or by their position among siblings (first, last, every second, empty).
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Style a ul.menu so the first item has no top border, every item after it has a 1px grey top border, and the last item is bold, using pseudo-classes.
Make every third card in a .grid of .card elements have a gold border, starting with the third.
Give a checkbox's label (written right after the checkbox) a line-through when the box is ticked.
Explain it without notes
What is the difference between :focus and :focus-visible, and why does it matter for accessibility?
Explain li:nth-child(-n+3) and li:nth-child(n+4). What does each match?
What is the difference between p:first-child and p:first-of-type? Give a case where only one matches.
Why can't you change the font size of visited links?
In what order should you write link pseudo-classes, and why?
Preview
Console
Nothing logged yet.Expected console output
checked: 1
disabled: 1
enabled buttons: 1