Псевдоклассы

Псевдоклассы

Псевдоклассы начинаются с одного двоеточия (:). Они используются для выбора элементов в определенном состоянии или позиции.

Основные псевдоклассы:

• :hover — выбирает элемент при наведении курсора.

• :active — выбирает элемент в момент активации (например, при нажатии кнопки мыши).

• :focus — выбирает элемент, который в фокусе (например, поле ввода).

• :nth-child(n) — выбирает элемент по его порядковому номеру (например, :nth-child(2) — второй элемент).

• :first-child — выбирает первый элемент внутри родителя.

• :last-child — выбирает последний элемент внутри родителя.

• :not(селектор) — выбирает элементы, которые не соответствуют указанному селектору.

• :checked — выбирает отмеченные элементы (например, чекбоксы или радиокнопки).

Пример:

a:hover {
  color: red; /* Ссылка становится красной при наведении */
}

li:nth-child(odd) {
  background-color: #f0f0f0; /* Нечетные элементы списка получают серый фон */
}