Псевдоклассы
Псевдоклассы начинаются с одного двоеточия (:). Они используются для выбора элементов в определенном состоянии или позиции.
Основные псевдоклассы:
-
: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; /* Нечетные элементы списка получают серый фон */
}