Псевдоклассы и псевдоэлементы

Введение

На прошлом уроке мы изучили позиционирование. Теперь — псевдоклассы и псевдоэлементы: они позволяют стилизовать элементы в особых состояниях (наведение, фокус) или добавлять виртуальные элементы (декоративные линии, иконки). Они расширяют возможности CSS без изменения HTML.

Задачи

• Использовать :hover, :focus, :active.
• Познакомиться с :first-child, :nth-child.
• Применять ::before и ::after для декора.

Псевдоклассы :hover, :focus, :active

a:hover { color: red; }      /* при наведении */
a:focus { outline: 2px solid blue; }  /* при фокусе (Tab, клик) */
button:active { transform: scale(0.98); }  /* при нажатии */

:hover — самый частый для интерактивности ссылок и кнопок.

:first-child, :last-child, :nth-child

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(2) { color: blue; }        /* второй */
li:nth-child(odd) { background: #f5f5f5; }   /* нечётные */
li:nth-child(

::before и ::after

Добавляют виртуальный элемент до или после содержимого. Обязательно свойство content:

.quote::before {
  content: """;
  font-size: 48px;
  color: #ccc;
}
 
.link::after {
  content: " →";
}

Для пустого декоративного элемента: content: "".

Пример: кнопка с hover

.btn {
  padding: 12px 24px;
  background: #0066cc;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
 
.btn:hover {
  background: #0052a3;
}

Практика

Задание №1

Стилизуй ссылки: по умолчанию синий, при hover — подчёркивание и другой цвет.

Задание №2

Чередуй фон строк таблицы с :nth-child(odd) и :nth-child(even).

Задание №3

Добавь иконку перед пунктом списка через ::before (символ или эмодзи в content).

Задание №4

Кнопка: при :hover чуть темнее, при :active — «вдавленная» (например, transform: scale(0.98) или box-shadow: inset).

Подведём итоги

Мы освоили псевдоклассы (:hover, :nth-child) и псевдоэлементы (::before, ::after). На следующем уроке — адаптивная вёрстка.

Типичные ошибки

• Забывать content у ::before и ::after — псевдоэлемент не отобразится без content: "".
• Использовать :hover на div без cursor: pointer — пользователь не поймет, что элемент интерактивен.
• Путать :nth-child и :nth-of-type — первое считает все дочерние, второе только одного типа.
• Писать :before вместо ::before — устаревший синтаксис (с одним двоеточием).

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

Упражнение №1. Меню с hover

Навигационное меню: при наведении на пункт — фон меняется, текст остаётся читаемым. Добавь плавный переход (transition: 0.2s).

Упражнение №2. Карточка с hover

Карточка: при наведении — лёгкая тень (box-shadow) и, при желании, лёгкое увеличение (transform: scale(1.02)).

Упражнение №3. Список с маркерами через ::before

Список без стандартных маркеров (list-style: none). Каждый пункт — с символом перед текстом через ::before (например, ✓ или •).

Упражнение №4. Первая буква заголовка

Используй ::first-letter у заголовка: увеличенный размер, другой цвет.

Упражнение №5 Информационная полоска

Блок с классом info: левая граница 4px, иконка (символ в ::before), текст. Стилизуй :hover для подсветки.

Упражнение №6. Форма: focus БОНУС

Поля ввода: при :focus — рамка другого цвета. Используй outline: none и border-color для кастомного вида.

Упражнение №7. disabled-кнопка БОНУС

Кнопка с атрибутом disabled. Стилизуй селектором button:disabled — приглушённые цвета, cursor: not-allowed.