Псевдоклассы и псевдоэлементы

В CSS существуют специальные конструкции, которые позволяют стилизовать элементы в определённом состоянии или их части, не изменяя HTML-разметку. Это псевдоклассы и псевдоэлементы.

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

Псевдокласс - это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Например, для того чтобы при наведении курсора кнопка меняла цвет фона мы можем использовать такой стиль:

.button:hover {
  background-color: lightblue;
}
css

Здесь :hover — псевдокласс, срабатывающий при наведении курсора.

Список стандартных псевдоклассов довольно обширный и вы можете самостоятельно ознакомится с их возможностями.

Помимо :hover наиболее часто используются:

• :active - срабатывает в момент когда кнопка нажата при клике;
• :focus - работает когда элемент находится в фокусе;
• :first-child - находит любой элемент, являющийся первым в своём родителе.

Псевдоэлементы

Псевдоэлементы позволяют стилизовать часть элемента или добавить визуальный контент без изменения содержимого HTML-документа. Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.

Список стандартных псевдоэлементов также довольно большой. Мы остановимся только на псевдоэлементах ::after и ::before. Оба этих элемента часще всего используются для декоративного оформления текста и позволяют создать потомка HTML-элемента вначале или в конце узла без измнения структуры документа.

Рассмотрим следующий код:

.card::before {
  content: "★";
  color: gold;
}
css

В результате у всех карточек появится символ "★", при этом HTML-структура остаётся неизменной:

В следующем уроке разберёмся, что происходит, когда к одному элементу применяется сразу несколько CSS-правил — поговорим о специфичности селекторов.