Псевдоклассы и псевдоэлементы в CSS: пошаговый старт

К концу этой инструкции у вас будет рабочая HTML-страница, где ссылка меняет цвет при наведении, поле формы подсвечивается при вводе, строки таблицы окрашены через одну, а перед заголовком стоит иконка, добавленная одним только CSS. На всё уйдёт около 30 минут. Ничего, кроме браузера и текстового редактора, не понадобится.

Псевдоклассы и псевдоэлементы — это способ выбрать элемент по состоянию или создать часть элемента, которой нет в разметке. Разница простая: псевдокласс отвечает на вопрос «в каком состоянии элемент» (наведён курсор, поле в фокусе, это первый ребёнок), а псевдоэлемент создаёт кусок, которого нет в HTML (первая буква абзаца, вставленный текст до и после содержимого).

Что нужно до начала

• любой текстовый редактор — «Блокнот», VS Code, что угодно;
• браузер не старше 2020 года — Chrome, Firefox, Safari или Edge. Всё из инструкции работает в актуальных версиях без префиксов;
• умение сохранить файл с расширением .html и открыть его двойным кликом.

Знать JavaScript не нужно: ни строчки скрипта здесь не будет.

Шаг 1. Создайте страницу-заготовку

Сохраните этот файл как index.html и откройте в браузере двойным кликом.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Псевдоклассы и псевдоэлементы</title>
  <style>
    /* сюда будем добавлять правила из следующих шагов */
  </style>
</head>
<body>
  <h1>Заголовок страницы</h1>
  <p class="intro">Первый абзац с текстом, на котором проверим первую букву.</p>
  <a href="https://example.com">Обычная ссылка</a>

  <form>
    <input type="text" placeholder="Введите имя">
  </form>

  <table>
    <tr><td>Строка 1</td></tr>
    <tr><td>Строка 2</td></tr>
    <tr><td>Строка 3</td></tr>
    <tr><td>Строка 4</td></tr>
  </table>
</body>
</html>

Проверка: в браузере видны заголовок, абзац, ссылка, поле ввода и таблица из четырёх строк. Всё чёрно-белое и без оформления — это нормально.

Шаг 2. Подсветите ссылку при наведении

Псевдокласс пишется через двоеточие после селектора. Добавьте внутрь тега <style>:

a {
  color: #1a5fb4;
  text-decoration: none;
}
/* курсор наведён на ссылку */
a:hover {
  color: #e01b24;
  text-decoration: underline;
}

Проверка: обновите страницу. Ссылка стала синей, а при наведении курсора краснеет и получает подчёркивание. Уведите курсор — цвет вернётся.

Одно двоеточие — признак псевдокласса. Кроме :hover часто нужны :focus (элемент в фокусе), :active (в момент нажатия) и :visited (уже посещённая ссылка).

Шаг 3. Подсветите поле формы при вводе

Тот же приём для поля ввода. Добавьте:

input {
  border: 1px solid #999;
  padding: 6px;
}
/* поле получило фокус: клик или переход табом */
input:focus {
  border-color: #1a5fb4;
  outline: none;
}

Проверка: кликните в поле — рамка станет синей. Кликните мимо — вернётся серая.

Псевдокласс не меняет разметку и не требует JavaScript. Браузер сам отслеживает состояние и применяет правило, пока состояние держится.

Шаг 4. Покрасьте каждую вторую строку таблицы

Здесь пригодится структурный псевдокласс :nth-child. Ключевое слово even означает чётные элементы, odd — нечётные.

table {
  border-collapse: collapse;
}
td {
  padding: 8px 16px;
  border: 1px solid #ddd;
}
/* каждая чётная строка таблицы */
tr:nth-child(even) {
  background: #f2f2f2;
}

Проверка: вторая и четвёртая строки получили серый фон, первая и третья остались белыми. Это классическая «зебра» без единого лишнего класса в HTML.

Внутри :nth-child() можно писать не только even/odd, но и формулы вида 3n (каждый третий) или конкретное число 2 (ровно второй элемент).

Шаг 5. Оформите первую букву абзаца

Теперь переходим к псевдоэлементам. Они пишутся через два двоеточия — так их отличают от псевдоклассов. Сделаем буквицу:

/* первая буква абзаца с классом intro */
.intro::first-letter {
  font-size: 2.5em;
  font-weight: bold;
  color: #1a5fb4;
}

Проверка: первая буква первого абзаца стала крупной, жирной и синей. Остальной текст не изменился.

Шаг 6. Вставьте иконку перед заголовком через CSS

Псевдоэлементы ::before и ::after создают контент, которого нет в разметке. Им обязательно нужно свойство content — без него они не появятся.

/* значок перед заголовком */
h1::before {
  content: "\1F4CC ";  /* эмодзи «канцелярская кнопка» */
}
/* пометка после посещённой ссылки */
a::after {
  content: " \2197";   /* стрелка вверх-вправо */
  font-size: 0.8em;
}

Проверка: перед заголовком появился значок, а после текста ссылки — маленькая стрелка. Обратите внимание: вставленный текст нельзя выделить мышью как обычный — он существует только в оформлении.

Одно двоеточие или два: как не запутаться

Историческая деталь: в CSS2 у псевдоэлементов было одно двоеточие (:before), и браузеры до сих пор его понимают ради совместимости. Но в новом коде для ::before, ::after, ::first-letter и ::first-line пишите два двоеточия — так задумано в CSS3.

Если не получилось

• Псевдоэлемент не появляется. Скорее всего, забыли content. Для ::before и ::after даже пустая строка content: ""; обязательна, иначе браузер их не рисует.
• «Зебра» красит не те строки. Проверьте, есть ли в таблице <thead>: он тоже считается строкой и сдвигает нумерацию. Считайте от начала родителя, а не от начала видимых данных.
• Правило :hover не срабатывает. Убедитесь, что селектор совпадает: a:hover действует только на теги <a>. Если элемент — <button>, нужен button:hover.
• Стрелка после ссылки вставилась, но без пробела. Пробел внутри content надо задавать явно внутри кавычек — обычные пробелы в CSS между значениями игнорируются.
• Эмодзи показывается как квадрат. Проверьте, что в <head> стоит <meta charset="utf-8"> и файл сохранён в кодировке UTF-8.

Что делать дальше

Вы освоили базовый набор. Следующие шаги, которые стоит попробовать на той же заготовке:

• :first-child и :last-child — выбрать первый и последний элемент группы без нумерации;
• :not() — исключить элементы из выборки, например «все ссылки, кроме первой»;
• ::placeholder — покрасить текст-подсказку внутри поля ввода;
• :checked — реагировать на отмеченный чекбокс, база для переключателей без JavaScript.

Полный и актуальный список псевдоклассов и псевдоэлементов с пометками о поддержке браузерами держите под рукой в справочнике MDN — там же указано, с какой версии работает каждый селектор.