Псевдоклассы: :hover, :focus, :nth-child

Добавляем стилям реакцию на действия пользователя и учимся выбирать элементы по их позиции в списке.

Псевдокласс — это ключевое слово после двоеточия, которое выбирает элемент в особом состоянии или по его положению среди соседей.

:hover — наведение мыши

Самый частый псевдокласс. Стиль применяется, пока курсор находится над элементом.

a {
  color: blue;
}

a:hover {
  color: red;
  text-decoration: underline;
}

Ссылка обычно синяя, но при наведении становится красной и подчёркнутой. Так пользователь понимает, что на элемент можно нажать. :hover часто вешают на кнопки и карточки, чтобы они «оживали» под мышкой.

:focus — элемент в фокусе

Срабатывает, когда элемент получает фокус: например, пользователь кликнул в поле ввода или дошёл до него клавишей Tab. Это критично для удобства и доступности.

input:focus {
  outline: 2px solid teal;
  background: #f0fdfa;
}

Когда вы кликаете в поле, вокруг него появляется бирюзовая рамка и слегка меняется фон — сразу видно, куда вы сейчас печатаете. Никогда не убирайте индикацию фокуса полностью: без неё людям, которые ходят по сайту с клавиатуры, будет трудно.

:first-child и :last-child

Эти псевдоклассы выбирают первый и последний элемент среди соседей.

<ul>
  <li>Первый</li>
  <li>Средний</li>
  <li>Последний</li>
</ul>

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

li:last-child {
  color: gray;
}

Первый пункт станет жирным, последний — серым. Удобно, например, чтобы убрать рамку у последнего элемента списка.

:nth-child — выбор по номеру

Самый мощный из них: выбирает элементы по их порядковому номеру. В скобках можно указать число, ключевые слова even (чётные) и odd (нечётные) или формулу.

/* каждая вторая строка таблицы — серый фон */
tr:nth-child(even) {
  background: #f2f2f2;
}

Это классический приём «зебра» для таблиц: чётные строки слегка подкрашены, и таблицу легче читать глазами. Несколько примеров значений:

Другие полезные псевдоклассы

• :active — момент нажатия (пока кнопка мыши зажата).
• :visited — уже посещённая ссылка.
• :checked — отмеченный чекбокс или радиокнопка.
• :disabled — отключённый элемент формы.

Итог

• :hover и :focus делают элементы интерактивными и понятными.
• :first-child / :last-child выбирают крайние элементы среди соседей.
• :nth-child() выбирает по номеру или формуле — отсюда «зебра» для таблиц и списков.