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

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

⚡ Кратко

Собери карточку «список уроков» и примени к ней все приёмы урока: :hover, :focus-visible, :nth-child, :not(), группировку :is()/:where() и декор через ::before/::after.

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

Задача: Сверстайте блок «Меню уроков» — заголовок и список из 5+ ссылок — и оживите его одними псевдоклассами и псевдоэлементами, без JavaScript и без лишних тегов под декор.

Что должно быть в результате

  • «Зебра» строк через :nth-child(even) или (odd).
  • Ссылки реагируют на :hover и имеют видимый :focus-visible.
  • Активный пункт (.active) выделен, а остальные обработаны через :not(.active).
  • Декоративный маркер/стрелка через ::before или ::after с content.
  • Подзаголовки сгруппированы через :is() или :where().
1

Соберите HTML

Заголовок <h2> + <ul class="lesson-list"> со ссылками. Один пункт пометьте классом active. Никаких пустых <span> ради декора — его дорисует CSS.

2

Зебра и исключение

Раскрасьте чётные строки через :nth-child. Уберите подчёркивание у всех ссылок, кроме активной, через :not(.active).

3

Состояния

Добавьте :hover (смена цвета/подчёркивание) и обязательно :focus-visible с видимой обводкой — проверьте навигацию клавишей Tab.

4

Декор псевдоэлементом

Перед пунктом — маркер через ::before { content: '' }, либо стрелка ::after { content: ' →' } у активной ссылки.

5

Самопроверка

Откройте в браузере: пройдитесь по Tab (видна рамка?), наведите курсор (меняется вид?), выделите текст мышью (можно стилизовать через ::selection). Убедитесь, что декор НЕ выделяется и не копируется как текст.

Подсказка: если псевдоэлемент «не появился» — почти всегда забыт content. Если фокус не виден — проверьте, что нигде не стоит outline: none.

Навигация