Псевдо-классы позволяют применять стили к элементам в зависимости от их состояния, позиции или других характеристик без изменения HTML-разметки.
Популярные псевдо-классы
:hover— при наведении курсора на элемент.:active— когда элемент активен (например, кнопка нажата).:focus— элемент в фокусе (например, поле ввода).:first-child— первый дочерний элемент родителя.:last-child— последний дочерний элемент родителя.:nth-child(n)— определённый по порядку ребёнок родителя.:not(selector)— исключает элементы, подходящие под указанный селектор.
Пример использования
a:hover {
color: red;
text-decoration: underline;
}
li:first-child {
font-weight: bold;
}
input:focus {
border-color: blue;
}В этом примере ссылки при наведении становятся красными и подчеркиваются, первый элемент списка выделяется жирным шрифтом, а поле ввода в фокусе получает синюю рамку.
Резюме
- Псевдо-классы позволяют применять стили в зависимости от состояния элемента.
- Помогают создавать интерактивные и динамические интерфейсы без JS.
- Совместимы с большинством современных браузеров.