Урок 41. Старый vs Новый: Псевдоклассы и псевдоэлементы

📁 Раздел: Современный CSS ⏱️ Время изучения: ~80 мин 🎯 Сложность: Средняя
#hover #focus #active #nth-child #first-child #checked #not #is #where #before #after #first-line #placeholder #selection

⚡ Кратко

Раньше «зебру» и декор делали лишними классами на каждом элементе (.card-1, .title-line) и убивали фокус через outline: none. Псевдоклассы и псевдоэлементы заменяют это одним правилом, без лишних тегов и без вреда для доступности.

1. Зебра в списке: классы на каждой строке → :nth-child

Старый подход. Чтобы подсветить чётные строки, верстальщик вручную проставлял класс на каждой нужной строке. Добавил строку — пересчитывай и переставляй классы.

  • Grid
  • Responsive
  • Animation
  • Pseudo
<li>Grid</li>
<li class="alt">Responsive</li>
<li>Animation</li>
<li class="alt">Pseudo</li>
.alt { background: #f1f5f9; }

Современный подход. Один селектор, HTML чистый, новые строки раскрашиваются автоматически.

  • Grid
  • Responsive
  • Animation
  • Pseudo
<li>Grid</li>
<li>Responsive</li>
<li>Animation</li>
<li>Pseudo</li>
li:nth-child(even) { background: #f1f5f9; }

2. Декоративная линия: лишний тег → ::after

Старый подход. Под заголовок добавляли пустой <span> только ради чёрточки — мусорный элемент в разметке.

<h2>Заголовок<span class="title-line"></span></h2>
.title-line { display: block; width: 48px; height: 4px; background: #2563eb; }

Современный подход. Линию дорисовывает псевдоэлемент — HTML остаётся семантичным.

Заголовок 
.title::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: #2563eb;
}

3. Фокус: outline: none → :focus-visible

Старый подход. Рамку фокуса просто убирали «ради красоты» — и ломали клавиатурную навигацию.

.button:focus { outline: none; }  /* недоступно с клавиатуры */

Современный подход. Фокус не убирают, а делают аккуратным — и только когда он реально нужен (Tab), не мешая клику мышью.

.button:focus-visible {
  outline: 3px solid var(--color-accent, #2563eb);
  outline-offset: 3px;
}

Навигация