Псевдоклассы в CSS позволяют выбирать элементы на основе их текущего состояния или положения в документе. Это может быть полезно для стилизации элементов при определенных действиях пользователя, таких как наведение курсора на элемент или выбор элемента в форме.
Псевдоклассы начинаются со знака двоеточия и указываются после селектора элемента. Например, псевдокласс ":hover" выбирает элемент, когда курсор мыши находится над ним:
В этом примере мы выбрали все ссылки, на которые наведен курсор мыши, и установили для них красный цвет.
Некоторые другие популярные псевдоклассы в CSS включают:
- :active - выбирает элемент, когда он активен (нажатие на элемент)
- :focus - выбирает элемент, когда он в фокусе (например, при нажатии на текстовое поле)
- :first-child - выбирает первый дочерний элемент в родительском элементе
- :nth-child() - выбирает дочерний элемент на основе его порядкового номера в родительском элементе
- :not() - выбирает элементы, которые не соответствуют заданному селектору
Например, чтобы выбрать все четные строки в таблице, мы можем использовать псевдокласс ":nth-child(even)":
В этом примере мы выбрали каждую четную строку в таблице и установили для них светло-серый фон.
Также, псевдоклассы могут быть комбинированы с другими селекторами для более точной выборки элементов. Например, чтобы выбрать первый элемент списка, мы можем использовать селектор "ul li:first-child":
Здесь мы выбрали первый элемент списка, находящегося внутри элемента "ul", и установили для него жирный шрифт.
В заключение, псевдоклассы позволяют стилизовать элементы на основе их текущего состояния или положения в документе. Они могут быть комбинированы с другими селекторами для более точной выборки элементов, что делает их очень полезными инструментами для создания динамических стилей в CSS.