Задания
Бери за основу разметку из раздела «Примеры». Под каждым заданием — как должен выглядеть результат.
Задание 1. Зебра-список через :nth-child
Сделай так, чтобы каждая нечётная строка списка имела светло-серый фон. Без добавления классов на строки.
Ожидаемый результат:
Задание 2. Состояния ссылки: :hover и :focus-visible
Добавь ссылкам в списке два состояния: при наведении (:hover) — подчёркивание и смена цвета; при фокусе с клавиатуры (:focus-visible) — заметную рамку-обводку. Активную ссылку (.active) с помощью :not() оставь без подчёркивания в обычном состоянии.
Задание 3. Декоративный маркер через ::before
Перед каждым пунктом дорисуй маркер-точку псевдоэлементом ::before с content: '' (не используй list-style). Цвет маркера — на твой выбор.
Задание 4. Поле поиска: ::placeholder
Сделай текст-подсказку в поле ввода приглушённо-серым через input::placeholder.
Самопроверка: открой страницу, пройдись по ссылкам клавишей Tab (должна быть видна рамка), наведи курсор (должно меняться оформление), и посмотри, пересчитывается ли зебра, если добавить ещё одну строку.