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

Псевдо-классы (:hover, :focus, :nth-child) стилизуют элементы в определённом СОСТОЯНИИ. Псевдо-элементы (::before, ::after, ::first-line) создают ВИРТУАЛЬНЫЕ элементы, которых нет в DOM. Важно: псевдо-элемент ≠ DOM-элемент!

Псевдо-классы (двоечие :): Определяют СОСТОЯНИЕ элемента:

:hover — наведение мыши :focus — фокус (tab, клик) :active — нажатие :first-child — первый ребёнок :last-child — последний ребёнок :nth-child(n) — N-й ребёнок :nth-child(odd) — нечётные :nth-child(even) — чётные :nth-child(3n) — каждый третий :not(.class) — исключение :link — непосещённая ссылка :visited — посещённая ссылка

Псевдо-элементы (двоеточие ::): Создают ВИРТУАЛЬНЫЕ элементы:

::before — ЭЛЕМЕНТ ПЕРЕД содержимым ::after — ЭЛЕМЕНТ ПОСЛЕ содержимого ::first-line — первая строка текста ::first-letter — первая буква ::selection — выделенный текст ::placeholder — placeholder в input

Важно:

• Псевдо-элемент ≠ DOM-элемент! Он не виден в DevTools.
• Требует content: "" (обязательно для before/after)
• ::before и ::after — инлайн по умолчанию

Псевдо-классы — как «когда я чувствую себя так-то» (когда навели мышь, когда в фокусе). Псевдо-элементы — как «призраки»: '::before' — призрак перед элементом, '::after' — призрак после. Они есть, но не в DOM.

**Самый простой:**

a:hover {
  color: #e74c3c;
}

input:focus {
  outline: 2px solid #3498db;
}

li:nth-child(even) {
  background: #f5f5f5;
}

Базовые псевдо-классы: hover, focus, nth-child.

**Простой:**

/* Декоративные элементы */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #3498db;
}

/* Счётчик */
.steps li {
  counter-increment: step;
  list-style: none;
}

.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #3498db;
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  margin-right: 0.5rem;
}

/* Кавычки */
blockquote::before {
  content: open-quote;
  font-size: 2em;
  color: #ccc;
}

Декоративные элементы, счётчики и кавычки.

**Реальный пример:**

/* Tooltip */
.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  background: #333;
  color: white;
  border-radius: 4px;
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip:hover::after {
  opacity: 1;
}

/* Выделение текста */
::selection {
  background: #3498db;
  color: white;
}

/* Кастомный checkbox */
.checkbox-custom::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.checkbox-custom:checked::before {
  background: #3498db;
  border-color: #3498db;
  background-image: url("check.svg");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

Tooltip, выделение, кастомный checkbox — продвинутые псевдо.

**Неправильно:** Думать, что ::before/::after — DOM-элементы

**Почему:** Они виртуальные: нет в DOM, нельзя выбрать через querySelector, не видны скринридерам.

**Правильно:** Псевдо-элементы — виртуальные. Для доступного контента используйте реальные элементы.

**Неправильно:** Забывать content: "" для before/after

**Почему:** Без content псевдо-элемент не создаётся. Это обязательный атрибут.

**Правильно:** content: "" — обязательно для ::before и ::after.

**Неправильно:** Путать псевдо-классы и псевдо-элементы

**Почему:** Псевдо-класс (:hover) — состояние существующего элемента. Псевдо-элемент (::before) — создание нового виртуального элемента.

**Правильно:** Одно двоеточие (:) — псевдо-класс. Двоеточие (::) — псевдо-элемент.

• Псевдо-классы (:hover, :focus) — состояние элемента
• Псевдо-элементы (::before, ::after) — виртуальные элементы
• content: "" — обязателен для before/after
• Псевдо-элемент ≠ DOM-элемент
• nth-child(N) — nth-child(3n+1) — формулы для выбора

Назад: Вы знаете grid-раскладки (C16) — псевдо-классы и псевдо-элементы добавляют динамические стили и оформление.

Вперёд: В следующем уроке (C18) вы изучите CSS-переменные: кастомные свойства для переиспользуемых значений.