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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Псевдо-селекторы

Синтаксис

Псевдоклассы изначально записывались с одним двоеточием (:hover), а псевдоэлементы — также с одним (:before). В CSS3 был введён чёткий синтаксис:

Псевдоклассы — одно двоеточие (:nth-child, :focus-visible)
Псевдоэлементы — два двоеточия (::before, ::backdrop)

Браузеры по-прежнему поддерживают старый синтаксис (:before) для обратной совместимости, но современный стандарт рекомендует использовать два двоеточия для псевдоэлементов.

Почему псевдо?

Псевдо-селекторы (псевдоклассы и псевдоэлементы) позволяют стилизовать элементы в особых состояниях или определённых частях документа без добавления лишних классов или HTML-разметки, чтобы точечно управлять стилями.

Псевдоклассы ( :pseudo-class) в определённом состоянии. Псевдоклассы пишутся с одним двоеточием.

Помните, что такое классы? Теперь представьте, что вы хотите изменить элемент не всегда, а только в определённой ситуации.

Например:

Когда пользователь наводит мышку на кнопку.
Когда ссылка уже была посещена.
Когда это первый элемент в списке.

Для этого используются псевдоклассы.

Они записываются через двоеточие после селектора:

a:hover {
    color: orange;
}

— это значит: «когда на ссылку наводят мышкой — сделай её оранжевой».

Ещё примеры:

Если у нас есть DOM-элемент p:

<p>Мы хотим изменить здесь шрифт</p>

...то в CSS мы пишем:

p:first-child {
    font-weight: bold;
}

Проще говоря — если абзац — первый среди своих "братьев и сестёр" (соседей), сделай его жирным.

А если у нас есть форма, и мы хотим изменить фокус в теге input:

input:focus {
    border: 2px solid green;
}

— когда поле ввода активно (на нём курсор), обведи его зелёной рамкой.

Это способ сказать: «примени стиль, если элемент находится в каком-то особом состоянии или занимает особое положение».

Динамические

★ Динамические (взаимодействие с пользователем)

Псевдокласс	Описание	Пример
`:hover`	При наведении курсора	`a:hover { color: red; }`
`:active`	В момент клика	`button:active { opacity: 0.8; }`
`:focus`	При фокусе (например, input)	`input:focus { border-color: blue; }`
`:visited`	Посещённая ссылка	`a:visited { color: purple; }`
`:focus-visible`	Элемент в фокусе, и фокус виден (например, при навигации клавиатурой)	`button:focus-visible { outline: 2px solid blue; }`
`:focus-within`	Элемент или один из его потомков в фокусе	`.form-group:focus-within { border-color: green; }`
`:target`	Элемент, чей `id` совпадает с хешем в URL	`#section1:target { background: #f0f0f0; }`

Структурные

★ Структурные (положение в DOM)

Псевдокласс	Описание	Пример
`:first-child`	Первый дочерний элемент	`li:first-child { font-weight: bold; }`
`:last-child`	Последний дочерний элемент	`div:last-child { margin-bottom: 0; }`
`:nth-child(n)`	Элемент под номером n	`tr:nth-child(2n) { background: #f5f5f5; }`
`:not(selector)`	Все элементы, кроме указанных	`p:not(.warning) { color: black; }`
`:nth-of-type(n)`	n-й элемент определённого типа среди братьев	`p:nth-of-type(2) { color: gray; }`
`:first-of-type`	Первый элемент своего типа среди братьев	`h2:first-of-type { margin-top: 0; }`
`:last-of-type`	Последний элемент своего типа среди братьев	`img:last-of-type { border-radius: 8px; }`
`:only-child`	Единственный дочерний элемент родителя	`div:only-child { width: 100%; }`
`:only-of-type`	Единственный элемент своего типа среди братьев	`span:only-of-type { font-style: italic; }`

Состояния

★ Состояния элементов

Псевдокласс	Описание	Пример
`:checked`	Выбранный чекбокс / радио-кнопка	`input:checked + label { color: green; }`
`:disabled`	Отключённый элемент формы	`button:disabled { opacity: 0.5; }`
`:empty`	Пустой элемент (без детей)	`div:empty { display: none; }`

Формы и валидация

Псевдокласс	Описание	Пример
`:valid`	Поле формы прошло валидацию	`input:valid { border-color: green; }`
`:invalid`	Поле формы не прошло валидацию	`input:invalid { border-color: red; }`
`:required`	Обязательное для заполнения поле	`input:required { background: #fff8e1; }`
`:optional`	Необязательное поле	`input:optional { opacity: 0.8; }`
`:user-valid` / `:user-invalid`	Состояние после взаимодействия пользователя (экспериментальные)	`input:user-invalid { box-shadow: 0 0 4px red; }`

Эти псевдоклассы позволяют создавать реактивные формы без JavaScript.

Псевдоэлементы

Что такое псевдоэлемент?

Псевдоэлементы (::pseudo-element) стилизуют части элемента (например, первую букву или строку). Псевдоэлементы пишутся с двумя двоеточиями.

А теперь представьте, что вы хотите добавить что-то новое, чего нет в HTML.

Например:

Маленькую иконку после каждой ссылки.
Кавычки в начале цитаты.
Стилизовать только первую букву абзаца.

Вы не хотите ради этого писать лишние теги. Вот тут и помогают псевдоэлементы. Они создают виртуальные части элемента — как будто они есть, но в коде их нет. Записываются через два двоеточия:

.quote::before {
    content: "“";
    font-size: 1.5em;
}

.quote::after {
    content: "”";
    font-size: 1.5em;
}

— это добавит кавычки в начало и конец любого элемента с классом .quote.

Ещё пример:

p::first-letter {
    font-size: 2em;
    float: left;
    margin-right: 5px;
}

— «сделай первую букву абзаца большой и обтекаемой».

li::marker {
    color: red;
}

— «сделай маркер списка (точку или цифру) красным».

Это способ добавить или изменить часть элемента, не меняя HTML. Это как волшебная кисточка, которая рисует что-то сверху, снизу, внутри — там, где физически нет отдельного тега.

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

Основные псевдоэлементы

Псевдокласс	Описание	Пример
`::before`	Вставляет контент перед элементом	`.quote::before { content: ""; }`
`::after`	Вставляет контент после элемента	`.link::after { content: ""; }`
`::first-letter`	Первая буква элемента	`p::first-letter { font-size: 2em; }`
`::first-line`	Первая строка элемента	`article::first-line { font-weight: bold; }`
`::selection`	Стиль выделенного текста	`::selection { background: yellow; }`
`::backdrop`	Фон под модальным окном (при `dialog::showModal()`)	`dialog::backdrop { background: rgba(0,0,0,0.7); }`
`::placeholder`	Стиль placeholder в полях ввода	`input::placeholder { color: #999; }`
`::file-selector-button`	Кнопка выбора файла в `<input type="file">`	`input[type="file"]::file-selector-button { background: #007bff; }`
`::cue`	Субтитры в медиаэлементах (WebVTT)	`video::cue { color: white; background: transparent; }`

Особенности поведения

Псевдоэлементы не существуют в DOM, поэтому к ним нельзя получить доступ через JavaScript.
Содержимое, добавленное через ::before и ::after, отображается только если задано свойство content.
Значение content может быть строкой, url(), attr() или даже пустым (""), но не может содержать HTML.
Некоторые псевдоклассы, такие как :visited, ограничены в стилях из соображений приватности (нельзя менять background-image, visibility и др.).

Псевдо-селекторы​

Синтаксис​

Почему псевдо?​

Динамические​

Структурные​

Состояния​

Формы и валидация​

Псевдоэлементы​

Что такое псевдоэлемент?​

Основные псевдоэлементы​

Особенности поведения​