Урок 41. Обзор урока: Псевдоклассы и псевдоэлементы

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

⚡ Кратко

Псевдоклассы (:) выбирают элемент по состоянию или положению, псевдоэлементы (::) создают виртуальные части элемента. Разбираем :hover, :focus, :active, :nth-child, :not(), :checked, ::before, ::after, ::placeholder, ::selection.

О чём урок

Псевдоклассы выбирают элемент по его текущему состоянию или положению (наведён, в фокусе, нажат, по счёту, отмечен), а псевдоэлементы дорисовывают части, которых в HTML нет (иконки, маркеры, текст-подсказку, выделение). Всё это — интерактивность и декор одним только CSS, без JavaScript и без лишних тегов.

Дальше, в уроке 42, оживим эти состояния плавными переходами через transition и @keyframes.

Ключевые понятия

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

  • :hover — наведение курсора
  • :focus / :focus-visible — фокус
  • :active — момент нажатия
  • :checked — отмеченный чекбокс/радио

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

  • :nth-child() — выбор по позиции
  • :first-child / :last-child
  • :not() — исключение
  • :is() / :where() — группировка

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

  • ::before / ::after — декор через content
  • ::first-line — первая строка
  • ::placeholder — подсказка в поле
  • ::selection — выделенный текст

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Синтаксис и короткие примеры.

💻 Примеры

Рабочая HTML/CSS связка.

⚖️ Старый vs Новый

Что усложняло код раньше и чем заменить.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы и исправления.

🏠 Домашнее задание

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация