What are pseudo-classes and when do you use them?

A pseudo-class starts with a single colon and matches an element in a particular condition. Some are user-action states, some are form states, some are structural, and some are logical wrappers around selector lists.

button:hover {
  background: #1d4ed8;
}

button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

li:nth-child(odd) {
  background: #f8fafc;
}

input:not(:placeholder-shown) {
  border-color: #16a34a;
}

Categories worth knowing

• User action: :hover, :active, :focus, :focus-visible, :focus-within
• Form state: :checked, :disabled, :required, :valid, :invalid, :placeholder-shown
• Structural: :first-child, :last-child, :nth-child(), :nth-of-type(), :empty
• Logical: :is(), :where(), :not(), :has()

:focus-visible is the modern way to show keyboard focus without forcing a ring on every mouse click. Removing focus outlines entirely is an accessibility regression unless you replace them with an equally visible indicator.