Reaction to User Actions

Pseudo-classes describe a special state of an element. They're added to a selector with a single colon.

1. Mouse and Touch States

• :hover: Triggers when user hovers cursor. Important for navigation.
• :active: Triggers at the moment of click/press. Gives visual feedback (button 'presses in').

2. Link States

• :link: Regular unvisited link.
• :visited: Link the user has already clicked.

3. Interactivity and Forms

• :focus: Triggers when element is selected (by tab or click). Critically important for accessibility!
• :focus-visible: Modern variant. Shows focus ring only when user uses keyboard (doesn't annoy mouse users).
• :checked: Triggers for selected checkboxes and radio buttons.

input:focus {
  outline: 2px solid var(--accent-color);
  background: #fff;
}

input:checked + label {
  font-weight: bold;
}