Примеры — Урок 41

Рабочие примеры

Псевдоклассы состояния (:hover, :focus, :active) интерактивны: чтобы увидеть их на статичной странице, мы рисуем два блока рядом — «обычный» и «как при наведении» (второй сделан inline-стилями, имитирующими результат :hover). В коде же — настоящий селектор с :hover.

1. :hover и :active — реакция кнопки

Слева кнопка в покое, справа — её вид, когда на неё навели курсор (поднялась и потемнела). Это имитация: реальное состояние задаётся правилом .button:hover.

обычное состояние

имитация :hover

.button {
  background: #2563eb;
  color: #fff;
  transition: transform .15s, background .15s;
}
.button:hover {            /* курсор наведён */
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(37,99,235,.4);
}
.button:active {           /* кнопка зажата */
  transform: translateY(0);
}

2. :focus-visible — видимый фокус для клавиатуры

Слева ссылка в покое, справа — та же ссылка, на которой пользователь остановился клавишей Tab: появляется заметная рамка-обводка.

Responsive

обычное состояние

Responsive

имитация :focus-visible

.lesson-list a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

3. :nth-child(even) — «зебра» в списке

Одно правило раскрашивает каждую чётную строку. Браузер сам считает позицию — добавишь строку, зебра пересчитается автоматически.

1. Grid
2. Responsive
3. Animation
4. Pseudo-classes
5. Transitions

.lesson-list li:nth-child(even) {
  background: #f1f5f9;
}

4. ::after с content — стрелка после ссылки

Стрелки «→» нет в HTML — её дорисовывает ::after через content. В превью она показана отдельным серым <span>, чтобы было видно, что именно добавляет псевдоэлемент.

Подробнее →

серая стрелка — это содержимое ::after, его нет в разметке

.link::after {
  content: ' →';
  color: #94a3b8;
}

5. ::before — иконка-бейдж перед текстом

Зелёная точка-маркер перед пунктом — тоже псевдоэлемент. В превью имитирована inline-спаном.

Урок завершён

.done::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16a34a;
  margin-right: 8px;
}

6. ::placeholder и ::selection

Слева — серый текст-подсказка в поле (стилизуется ::placeholder); справа — фрагмент с жёлтой подсветкой, как при выделении мышью (::selection).

Текст, где это выделено мышью.

input::placeholder {
  color: #64748b;
}

::selection {
  background: #fde68a;
  color: #111827;
}

Эксперимент: открой эти примеры в реальном HTML и наведи курсор / пройдись по Tab / выдели текст мышью — увидишь настоящие состояния, которые здесь показаны имитацией.

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

⚡ Кратко