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

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

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

Псевдоклассы — это селекторы, которые позволяют выбирать элементы в определённом состоянии (например, при наведении курсора).

Синтаксис псевдокласса

селектор:псевдокласс {
  /* стили */
}

Примеры популярных псевдоклассов

• :hover — при наведении мыши.
• :focus — при получении фокуса.
• :nth-child(n) — для выбора элемента по порядковому номеру.
• :checked — для отмеченных чекбоксов или радио-кнопок.
• :not(selector) — выбирает элементы, которые не соответствуют селектору.

Пример псевдокласса

button:hover {
  background-color: #007BFF;
  color: white;
}

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

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

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

селектор::псевдоэлемент {
  /* стили */
}

Примеры популярных псевдоэлементов

• ::before — вставляет контент перед элементом.
• ::after — вставляет контент после элемента.
• ::first-letter — стилизует первую букву текста.
• ::first-line — стилизует первую строку текста.
• ::placeholder — стилизует текст внутри полей ввода.

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

p::first-line {
  font-weight: bold;
}

button::after {
  content: " →";
}

Таблица сравнения