Pseudo-classes

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Change styles based on element state

Pseudo-class means selecting an element's state — :hover for when the mouse is over it, :focus for when an input is focused, :nth-child() for picking list items by their position, and so on. Without hover/focus states in interactive UI, users can struggle to guess what's clickable.

css

.button:hover {
  transform: translateY(-2px);
}

.input:focus {
  outline: 2px solid dodgerblue;
}

tr:nth-child(even) {
  background-color: #f6f8fa;
}

You should see

When you hover over the button, it'll lift up slightly. When an input is focused, an outline will appear. You'll be able to give table rows alternating backgrounds.

Warning

:focus styles shouldn't be removed. They matter a lot for keyboard users.