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

Полный разбор с живыми примерами. Потрогай каждый и посмотри, как это работает в реальном CSS.

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

Одно двоеточие или два?

Псевдокласс : — одно двоеточие

Описывает состояние элемента
Отбор по положению в DOM
Не создаёт новых элементов
:hover :focus :nth-child()

Псевдоэлемент :: — два двоеточия

Стилизует часть элемента
Создаёт виртуальный дочерний элемент
Требует content (у ::before/::after)
::before ::after ::first-letter

Псевдоклассы состояния

Реагируют на действия пользователя: наведение, фокус, клик.

Наведение курсора

:hover

Срабатывает, когда пользователь наводит указатель на элемент.

demo

/* цвет, тень и лёгкое приподнятие */
.btn:hover {
  background: #4a5fd9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102,126,234,0.4);
}

Фокус на элементе

:focus

Элемент в фокусе (кликнут или выбран Tab). Часто используется для полей ввода.

demo

.input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.2);
}

Момент нажатия

:active

Срабатывает в момент клика — между нажатием и отпусканием кнопки мыши.

demo

.btn:active {
  transform: scale(0.95);
  background: #667eea;
}

Состояния ссылок

:link :visited

:link — непосещённая ссылка. :visited — ссылка, по которой уже переходили. Браузеры ограничивают стилизацию посещённых ссылок из соображений приватности.

demo Нажми на меня →

a:link    { color: #667eea; }   /* свежая ссылка */
a:visited { color: purple; }   /* уже открывали */

Структурные псевдоклассы

Выбирают элементы по их позиции в родителе. Мощный инструмент без лишних классов.

Первый и последний ребёнок

:first-child :last-child

Первый — зелёный, последний — розовый, нечётные — с синей полосой слева.

demo

🥇 Первый элемент
Второй элемент
Третий элемент
Четвёртый элемент
🏁 Последний элемент

li:first-child { background: #e8f5e9; }
li:last-child  { background: #fce4ec; }
li:nth-child(odd) { border-left: 3px solid #667eea; }

Формулы n-го элемента

:nth-child(2n) :nth-child(3n)

Каждый 2-й — с фоном. Каждый 3-й — выделен цветом и жирным шрифтом.

demo

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9

/* Каждый второй */
li:nth-child(2n) { background: #eef0ff; }
/* Каждый третий */
li:nth-child(3n) { color: #e91e63; font-weight: 600; }

/* Шпаргалка по формулам */
/* odd / 2n+1 — нечётные           even / 2n — чётные */
/* 3n — каждый третий              3n+1 — 1-й, 4-й, 7-й... */

Исключение

:not(.active)

Все карточки, у которых нет класса .active, — полупрозрачные.

B ✓

/* Все .item, кроме тех что с .active */
.item:not(.active) {
  opacity: 0.4;
}

Родительский селектор

:has() ✨ Baseline 2023

Стилизуем карточку-родителя, если внутри неё есть <img>. Раньше такое было невозможно на чистом CSS!

demo

Карточка С картинкой

Карточка БЕЗ картинки

/* Карточка, внутри которой есть img */
.card:has(img) {
  border-color: #667eea;
  background: #f5f6ff;
}

Псевдоклассы форм

Состояния полей ввода: доступность, валидация, обязательность.

Доступные и заблокированные поля

:enabled :disabled

demo

input:enabled  { background: #f9fff9; }
input:disabled { background: #f5f5f5; color: #bbb; }

Обязательные поля и чекбоксы

:required :checked

demo Отметь меня — текст зачеркнётся

input:required    { border-color: #ef9a9a; }
input:checked + span { text-decoration: line-through; }

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

Стилизуем «невидимые» части элементов или создаём виртуальные дочерние элементы.

Декоративные кавычки

::before ::after

Самые популярные псевдоэлементы. Создают виртуальный контент до и после содержимого элемента. Всегда требуют свойство content.

demo

CSS — это язык, который превращает скучную разметку в красивый дизайн

.quote::before {
  content: '«';
  font-size: 4rem;
  color: #667eea;
}
.quote::after {
  content: '»';
  font-size: 4rem;
  color: #667eea;
}

Первая буква и первая строка

::first-letter ::first-line

Буквица и выделение первой строки — классика книжной вёрстки в вебе.

demo

Каскадные таблицы стилей (CSS) — это язык, описывающий внешний вид документа. Он работает вместе с HTML, превращая голую разметку в красивые веб-страницы.

p::first-letter {
  font-size: 2.8rem;
  color: #667eea;
  float: left;
}
p::first-line {
  font-weight: 600;
}

Цвет выделения текста

::selection

Меняет цвет фона и текста при выделении мышкой.

demo Выдели этот текст мышкой → увидишь фиолетовый фон

::selection {
  background: #667eea33;
  color: #1a1a2e;
}

Стилизация placeholder

::placeholder

Текст-подсказка внутри поля ввода. Можно сделать курсивом и задать цвет.

demo

input::placeholder {
  color: #bbb;
  font-style: italic;
}

Маркер списка

::marker

Стилизует буллиты или номера в списках. Можно задать цвет, шрифт и даже заменить символ.

demo

Пункт с кастомным маркером
Ещё один пункт
И последний

li::marker {
  color: #667eea;
  content: '✦ ';
}

Шпаргалка

Селектор	Тип	Что делает
`:hover`	Псевдокласс	При наведении мыши
`:focus`	Псевдокласс	Элемент в фокусе
`:active`	Псевдокласс	В момент нажатия
`:visited`	Псевдокласс	Посещённая ссылка
`:first-child`	Псевдокласс	Первый дочерний элемент
`:last-child`	Псевдокласс	Последний дочерний элемент
`:nth-child(n)`	Псевдокласс	n-й дочерний элемент
`:not(x)`	Псевдокласс	Всё, кроме x
`:has(x)`	Псевдокласс	Элемент, содержащий x
`:checked`	Псевдокласс	Отмеченный чекбокс/радио
`:enabled`	Псевдокласс	Доступное поле ввода
`:disabled`	Псевдокласс	Заблокированное поле
`::before`	Псевдоэлемент	Контент перед элементом
`::after`	Псевдоэлемент	Контент после элемента
`::first-letter`	Псевдоэлемент	Первая буква
`::first-line`	Псевдоэлемент	Первая строка
`::selection`	Псевдоэлемент	Выделенный текст
`::placeholder`	Псевдоэлемент	Placeholder в input
`::marker`	Псевдоэлемент	Буллит/номер списка