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

Возможное решение

Это один корректный вариант. Главное — не просто код, а понимание: какое состояние ловит каждый селектор и что именно дорисовывает псевдоэлемент.

Результат целиком

<ul class="lesson-list">
  <li><a href="#">Grid</a></li>
  <li><a class="active" href="#">Responsive</a></li>
  <li><a href="#">Animation</a></li>
</ul>
<input type="search" placeholder="Например: flexbox">

CSS с разбором

/* Зебра: каждая нечётная строка серая (задание 1) */
.lesson-list li:nth-child(odd) {
  background: #f1f5f9;
}

/* Маркер-точка перед пунктом — дорисован, не list-style (задание 3) */
.lesson-list li::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  margin-right: 8px;
}

/* Все ссылки кроме активной — без подчёркивания (задание 2, :not) */
.lesson-list a:not(.active) {
  text-decoration: none;
}

/* Наведение — подчёркивание + смена цвета (задание 2) */
.lesson-list a:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

/* Фокус с клавиатуры — видимая рамка (задание 2) */
.lesson-list a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* Приглушённая подсказка в поле (задание 4) */
input::placeholder {
  color: #64748b;
}