CSS Pseudo-classes

A pseudo-class targets an element in a particular state or position, without needing an extra class in the HTML.

a:hover {
  text-decoration: underline;
}

input:focus {
  outline: 2px solid #4f46e5;
}

li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: none;
}

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

p:not(.intro) {
  color: #6b7280;
}

Common ones worth knowing early: :hover, :focus, :active, :first-child, :last-child, :nth-child(n), :not(). :nth-child() accepts a number, even/odd, or a formula like 3n+1 for "every third element starting at the first."