Селекторы, псевдоклассы и псевдоэлементы

Селекторы определяют, к каким элементам применяются стили. Псевдоклассы учитывают состояние и положение элемента, а псевдоэлементы позволяют оформить его часть или создаваемый CSS фрагмент. Ниже собраны основные конструкции и расширения; экспериментальные возможности отмечены отдельно.

Свойства · Функции · Правила

Названия со ссылками ведут к отдельным статьям; остальные возможности кратко описаны здесь. Поддержка отдельных значений и расширенного синтаксиса может отличаться.

Селекторы

Селекторы: названия и назначение
Селектор Пример Описание примера
.class .test Выбирает все элементы с классом test (class = "test").
#id #test Выбирает все элементы с id = "test".
* * Выбирает все элементы (универсальный селектор). Селектор также может выбрать все элементы внутри другого элемента.
element h2 Выбирает все заголовки второго уровня - <h2>.
selector,selector h2, h3 Выбирает все элементы <h2> и <h3>.
selector selector h2 i Выбирает все элементы <i> внутри элементов <h2>.
selector > selector p > a Выбирает все дочерние элементы <a>, у которых родитель - элемент <p>.
selector + selector h2 + p Выбирает все элементы <p>, которые расположены сразу же после элементов <h2>.
selector ~ selector h2 ~ p Выбирает элементы p, следующие после h2 и имеющие того же родителя; соседство не обязательно.
[attribute] [title] Выбирает все элементы с атрибутом title.
[attribute = value] [type=password] Выбирает все элементы с атрибутом type и значением "password"
[attribute=value][attribute2=value2] [src='logo.png'][alt='image'] Выбирает все элементы, которые имеют указанные атрибуты (src и alt) со значениями этих атрибутов logo.png для первого и image для второго.
[attribute ~= value] [title ~= home] Выбирает все элементы с атрибутом title, который содержит слово "home".
[attribute|= value] [title |= home] Выбирает элементы, у которых title равен home или начинается с home-, а не с произвольного префикса home.
[attribute^=value] a[href ^= "http"] Выбирает каждый элемент <a>, содержащий атрибут href, значение которого начинается с "http".
[attribute$=value] a[href$= ".mp3"] Выбирает каждый элемент <a>, значение атрибута href которого заканчивается на ".mp3".
[attribute*=value] [title*="home"] Выбор всех элементов с атрибутом title, в значение которого содержится "home".

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

Селекторы: названия и назначение
Псевдоэлемент Пример Описание
::after p::after Создаёт псевдоэлемент после содержимого p при подходящем значении content; это не соседний DOM-элемент.
::before p::before Создаёт псевдоэлемент перед содержимым p при подходящем значении content; это не дочерний DOM-узел.
::first-letter p::first-letter Оформляет первую букву первой форматированной строки блочного контейнера с учётом правил пунктуации.
::first-line p::first-line Позволяет стилизовать первую строку каждого элемента <p>, которая будет отличаться от основного текста.
::selection ::selection Позволяет добавлять тень к тексту, управлять цветом фона и цветом текста, выделенного пользователем

Псевдоклассы

Селекторы: названия и назначение
Псевдокласс Пример Описание
:active a:active Применяет стиль к активной ссылке.
:checked input:checked Применяется к элементам <input> (выбранные элементы type = "radio" или type = "checkbox")
:disabled input:disabled Выбирает каждый отключенный элемент <input>.
:empty div:empty Выбирает div без дочерних элементов и текстовых узлов с содержимым; в браузерах пробелы в тексте мешают совпадению, комментарии — нет.
:enabled input:enabled Применяется для выбора каждого элемента <input>, который не отключен.
:first-child h2:first-child Выбирает любой тег <h2>, который является первым дочерним тегом своего родителя.
:first-of-type p:first-of-type Выбирает p, который первым среди соседних элементов имеет тип p; другие типы не учитываются.
:focus input:focus Стилизует элемент <input>, который находится в фокусе.
:hover a:hover Стилизует ссылку (элемент <a>) при наведении указателя мыши.
:in-range input:in-range Выбирает все элементы <input> со значением в указанном диапазоне.
:invalid input:invalid Выбирает input, нарушающий применимые ограничения формы: тип, обязательность, диапазон, pattern и другие.
:lang(код языка) p:lang(es) Выбирает p с языком испанской группы, например es или es-MX; учитывается язык, унаследованный от предка.
:last-child h2:last-child Выбирает любой тег <h2>, который является последним дочерним элементом своего родителя.
:last-of-type p:last-of-type Выбирает p, который последним среди соседних элементов имеет тип p; другие типы не учитываются.
:link a:link Задаёт стиль всем ссылкам, по которым пользователь не произвёл переход (не посещенные ссылки).
:not(селектор) :not(h2) Задаёт стиль всем элементам, которые не являются элементом <h2>
:nth-child(n) tr:nth-child(2) Выбирает каждый элемент <tr>, который является вторым дочерним элементом своего родительского элемента.
:nth-last-child(n) p:nth-last-child(2) Выбирает p, который является вторым дочерним элементом своего родителя, считая с конца.
:nth-last-of-type(n) p:nth-last-of-type(2) Выбирает второй p среди соседних элементов того же типа, считая с конца.
:nth-of-type(n) img:nth-of-type(2) Выбирает второй img среди соседних элементов того же типа; другие типы не учитываются.
:only-child p:only-child Выбор каждого элемента <p>, который является единственным дочерним элементом своего родительского элемента (нет других элементов).
:only-of-type p:only-of-type Выбор каждого элемента <p>, который является единственным элементом <p> своего родительского элемента (нет других элементов <p>).
:optional input:optional Выбирает все элементы <input>, у которых не задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы).
:out-of-range input:out-of-range Выбирает все элементы <input>, которые находятся за пределами указанного диапазона (атрибуты min и max).
:read-only input:read-only Выбирает input, содержимое которого пользователь не может редактировать; это шире проверки атрибута readonly.
:read-write input:read-write Выбирает редактируемый пользователем input. Отсутствие readonly у произвольного элемента не делает его редактируемым.
:required input:required Выбирает все элементы <input>, у которых задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы).
:root :root Определяет корневой элемент документа.
:target :target Стилизует целевой элемент на странице (на который был произведён переход по якорной ссылке).
:valid input:valid Выбирает input, удовлетворяющий применимым ограничениям валидации формы.
:visited a:visited Задаёт стиль всем ссылкам, по которым пользователь произвёл переход (посещенные ссылки).

В :nth-child() и :nth-last-child() запись An+B можно дополнить списком of: :nth-child(2 of .item) считает только соседей, соответствующих .item. :not() принимает список селекторов; специфичность :not(), :is() и :has() определяется наиболее специфичным аргументом. Псевдоэлемент с двойным двоеточием и псевдокласс с одинарным — разные конструкции.

Современные селекторы и псевдоклассы

Современные селекторы и псевдоклассы
Название Назначение
:is(), :where() Выбирают элемент по любому селектору из списка. :is() принимает максимальную специфичность аргументов, :where() всегда имеет нулевую специфичность.
:has() Проверяет наличие связанных элементов относительно выбранного: .card:has(img) выбирает карточку с изображением. Не допускает вложенный :has().
:scope Обозначает элемент, относительно которого определяется область сопоставления.
& Селектор вложенности CSS связывает вложенное правило с родительским; это не текстовая подстановка Sass.
[attr=value i], [attr=value s] Модификаторы сравнения значения атрибута без учёта или с учётом регистра ASCII; поддержка s различается.
ns|element, *|element, |element Выбирают элементы в заданном, любом или пустом пространстве имён; ns объявляется через @namespace.
:any-link, :local-link :any-link выбирает ссылки с целью перехода; :local-link — локальные ссылки, экспериментальное.
:focus-visible, :focus-within Первый учитывает необходимость видимого индикатора фокуса, второй выбирает элемент с фокусом у него или потомка.
:dir() Выбирает элемент по направлению текста, например :dir(rtl), с учётом вычисленного направления.
:default, :indeterminate Выбирают элементы формы по умолчанию и элементы с неопределённым состоянием.
:placeholder-shown, :autofill Выбирают поле с отображаемой подсказкой или с автоматически заполненным браузером значением.
:user-valid, :user-invalid Учитывают валидность после взаимодействия пользователя; момент применения определяется браузером.
:defined Выбирает определённые элементы, в том числе зарегистрированные пользовательские элементы.
:fullscreen, :modal, :picture-in-picture Выбирают элемент в полноэкранном режиме, модальном состоянии или режиме «картинка в картинке».
:popover-open, :open Выбирают открытый popover либо поддерживаемый элемент в открытом состоянии, например details.
:host, :host(), :host-context() Обращаются к хосту теневого дерева из его стилей; поддержка :host-context() ограничена.
:state() Выбирает пользовательский элемент с состоянием, объявленным через CustomStateSet.
:target-current, :target-before, :target-after Выбирают цели относительно текущей цели прокрутки; экспериментальное.
:current, :past, :future, :playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked Состояния временного содержимого и воспроизведения; поддержка ограничена, часть возможностей экспериментальна.
:heading, :heading(), :interest-source, :interest-target, :active-view-transition, :active-view-transition-type() Новые псевдоклассы для заголовков, интереса к элементу и переходов представления; экспериментальное, проверяйте поддержку отдельно.

Дополнительные псевдоэлементы

Дополнительные псевдоэлементы
Название Назначение
::marker Оформляет маркер списка; поддерживается ограниченный набор свойств.
::placeholder Оформляет текст подсказки поля формы.
::file-selector-button Оформляет кнопку выбора файла внутри input type=file.
::backdrop Оформляет фон за элементом верхнего слоя, например модальным dialog.
::part() Оформляет части теневого дерева, явно опубликованные через атрибут part.
::slotted() Из стилей теневого дерева выбирает элементы, непосредственно назначенные слоту.
::highlight(), ::spelling-error, ::grammar-error, ::target-text Оформляют именованные выделения, ошибки правописания/грамматики и текстовую цель; поддержка отдельных видов различается.
::view-transition, ::view-transition-group(), ::view-transition-image-pair(), ::view-transition-old(), ::view-transition-new() Оформляют дерево перехода между старым и новым представлением страницы.
::details-content Выбирает содержимое details, кроме summary; поддержка различается.
::checkmark, ::picker(), ::picker-icon Оформляют части настраиваемых элементов выбора; экспериментальное.
::scroll-button(), ::scroll-marker, ::scroll-marker-group, ::column Оформляют кнопки и маркеры прокрутки, группу маркеров и колонки; экспериментальное.

Специальные контексты

Специальные контексты
Название Назначение
:has-slotted Выбирает слот с назначенным содержимым; поддержка различается.
::cue, ::cue-region Оформляют текст и регионы субтитров WebVTT; поддержка регионов различается.
:first, :left, :right, :blank Псевдоклассы страницы в @page: первая, левая, правая и пустая страницы. Это не селекторы HTML-элементов.
||, :nth-col(), :nth-last-col() Проект выбора элементов по колонкам таблицы; экспериментальное.
::view-transition-group-children() Оформляет контейнер вложенных групп перехода; экспериментальное.
::search-text, :navigation-source, :xr-overlay Специализированные расширения для выделения поиска, источника навигации и XR-оверлея; экспериментальное.

Как читать селектор

Селектор выбирает только кнопки с классом action внутри card. :focus-visible добавляет условие видимого индикатора фокуса. Прямые потомки выбираются через >, более глубокие потомки не подходят.

CSS
.card > button.action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

Спецификация

CSS: Селекторы — W3C