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

Псевдоэлемент CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента или элементов.

Синтаксис

selector::pseudo-element {
  property: value;
}

Например, ::first-line можно использовать, чтобы изменить шрифт первой строки абзаца.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Для псевдоэлементов используются двойные двоеточия (::). Это отличает псевдоэлементы от псевдоклассов, в обозначении которых используется одно двоеточие (:). Обратите внимание: браузеры поддерживают синтаксис с одним двоеточием для первых четырёх псевдоэлементов: ::before, ::after, ::first-line и ::first-letter.

Псевдоэлементы не существуют независимо. Элемент, частью которого является псевдоэлемент, называется его исходным элементом. Псевдоэлемент должен располагаться после всех остальных компонентов в сложном или составном селекторе. Последний элемент в селекторе является исходным элементом псевдоэлемента. Например, первую строку абзаца можно выбрать с помощью p::first-line, но нельзя выбрать дочерние элементы первой строки. Поэтому p::first-line > * недопустим.

Псевдоэлемент можно выбрать в зависимости от текущего состояния исходного элемента. Например, p:hover::first-line выбирает первую строку (псевдоэлемент) абзаца, когда на сам абзац наведён указатель (псевдокласс).

Спецификации позволяют выбирать некоторые псевдоэлементы в зависимости от текущего состояния исходного элемента. В таких случаях псевдоэлемент выбирается только тогда, когда он находится в том же состоянии. Например, ::picker(select):hover выбирает потомка настраиваемого элемента <select>, на который в данный момент наведён указатель, за исключением первого дочернего элемента <button>, который не выбирается псевдоэлементом ::picker(). Однако обратите внимание: если список селекторов содержит недопустимый селектор, весь блок стилей игнорируется. Поэтому убедитесь, что указанное состояние поддерживается псевдоэлементом, к которому оно применяется.

Типографические псевдоэлементы

::first-line

Первая строка исходного элемента.

::first-letter

Первая буква, цифра или символ в первой строке исходного элемента.

::cue

Подсказки WebVTT внутри выбранного элемента. Это можно использовать, чтобы стилизовать субтитры и другие подсказки в мультимедиа с дорожками VTT. Модуль Псевдоэлементы CSS также определяет субпсевдоэлементы ::postfix и ::prefix. Они пока не поддерживаются ни одним браузером.

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

Выбирают разделы документа на основе их содержимого и состояния, позволяя оформлять эти области по-разному, чтобы сообщить пользователю об этом состоянии.

::grammar-error

Фрагмент текста, который браузер считает грамматически неверным.

::highlight()

Элементы в реестре подсветок. Используется для создания пользовательских подсветок.

::search-text

Результаты поиска, найденные с помощью функции поиска текста «Найти» или «Найти на странице» пользовательского агента.

::selection

Выбранная часть документа.

::spelling-error

Фрагмент текста, который браузер считает написанным с ошибкой.

::target-text

Целевой элемент документа. Целевой элемент определяется с помощью идентификатора фрагмента URL.

Псевдоэлементы, подчиняющиеся дереву

Эти псевдоэлементы ведут себя как обычные элементы, органично вписываясь в блочную модель. Они действуют как дочерние элементы, которые можно стилизовать непосредственно в иерархии исходного элемента.

::before

Создаёт псевдоэлемент, который является первым дочерним элементом выбранного элемента.

::after

Создаёт псевдоэлемент, который является последним дочерним элементом выбранного элемента.

::column

Каждый фрагмент столбца в многоколоночном макете.

::marker

Автоматически созданный маркерный блок элемента списка.

::backdrop

Фон исходного элемента, отображаемого в верхнем слое.

::scroll-button()

Создаёт кнопку, с помощью которой можно управлять прокруткой контейнера прокрутки, к которому она применяется.

::scroll-marker

Создаёт псевдоэлемент — маркер прокрутки, то есть кнопку перехода к цели прокрутки для исходного элемента, вложенную в группу маркеров прокрутки.

::scroll-marker-group

Создаёт контейнер перед контейнером прокрутки или после него, в котором размещаются псевдоэлементы ::scroll-marker, созданные для этого элемента или его потомков.

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

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

::details-content

Разворачиваемое и сворачиваемое содержимое элемента <details>.

::part()

Любой элемент в теневом дереве, имеющий соответствующий атрибут part.

::slotted()

Любой элемент, помещённый в слот внутри HTML-шаблона.

Псевдоэлементы, связанные с формами

Эти псевдоэлементы связаны с элементами управления форм.

::checkmark

Выбирает галочку внутри выбранного в данный момент элемента <option> настраиваемого элемента select, чтобы визуально указать, какой из них выбран.

::file-selector-button

Кнопка элемента <input> типа type="file".

::picker()

Часть элемента, отвечающая за выбор, например раскрывающийся список настраиваемого элемента select.

::picker-icon

Значок выбора внутри элементов управления форм, с которыми связан такой значок. Для настраиваемого элемента select он выбирает стрелку, направленную вниз, когда список закрыт.

::placeholder

Текст-заполнитель в поле ввода.

Алфавитный указатель

К псевдоэлементам, определённым набором спецификаций CSS, относятся:

A

• ::after

B

• ::backdrop
• ::before

C

• ::column
• ::checkmark
• ::cue (и ::cue)

D

• ::details-content

F

• ::file-selector-button
• ::first-letter
• ::first-line

G

• ::grammar-error

H

• ::highlight()

M

• ::marker

P

• ::part()
• ::picker()
• ::picker-icon
• ::placeholder

S

• ::scroll-button()
• ::scroll-marker
• ::scroll-marker-group
• ::selection
• ::slotted()
• ::spelling-error

T

• ::target-text

V

• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

Нестандартные псевдоэлементы

К нестандартным псевдоэлементам с префиксами производителей относятся:

Префикс -moz-

• ::-moz-color-swatch
• ::-moz-focus-inner
• ::-moz-list-bullet
• ::-moz-list-number
• ::-moz-meter-bar
• ::-moz-progress-bar
• ::-moz-range-progress
• ::-moz-range-thumb
• ::-moz-range-track

Префикс -webkit-

• ::-webkit-inner-spin-button
• ::-webkit-meter-bar
• ::-webkit-meter-even-less-good-value
• ::-webkit-meter-inner-element
• ::-webkit-meter-optimum-value
• ::-webkit-meter-suboptimum-value
• ::-webkit-progress-bar
• ::-webkit-progress-inner-element
• ::-webkit-progress-value
• ::-webkit-scrollbar
• ::-webkit-search-cancel-button
• ::-webkit-search-results-button
• ::-webkit-slider-runnable-track
• ::-webkit-slider-thumb

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

Некоторые селекторы псевдоэлементов можно объединять в цепочку, чтобы стилизовать псевдоэлементы, вложенные в другие псевдоэлементы. Поддерживаются следующие комбинации вложенных псевдоэлементов:

• ::after
  • ::after::marker: выбирает псевдоэлемент ::marker псевдоэлемента ::after, если ::after оформлен как элемент списка с помощью display: list-item.
• ::before
  • ::before::marker: выбирает псевдоэлемент ::marker псевдоэлемента ::before, если ::before оформлен как элемент списка с помощью display: list-item.

Примеры и сведения о совместимости с браузерами приведены на отдельных справочных страницах псевдоэлементов.

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

Псевдоэлементы подсветки, такие как ::selection, ::target-text, ::highlight(), ::spelling-error и ::grammar-error, используют единую модель наследования, отличающуюся от обычного наследования элементов.

Стили, применённые к псевдоэлементам подсветки, наследуются от обоих источников:

1. От родительских элементов (согласно обычному наследованию).
2. От псевдоэлементов подсветки родительских элементов (согласно наследованию подсветки).

Это означает, что если задать стили и для псевдоэлемента подсветки родительского элемента, и для псевдоэлемента подсветки дочернего элемента, подсвеченный текст дочернего элемента объединит свойства из обоих источников.

Рассмотрим конкретный пример.

Сначала создадим HTML с двумя вложенными элементами <div>. Часть текста находится непосредственно внутри родительского элемента <div>, а часть вложена в дочерний элемент <div>.

<div class="parent">
  Parent text
  <div class="child">Child text</div>
</div>

Затем добавим CSS, который выбирает родительский и дочерний элементы <div> по отдельности и задаёт для них разные значения свойства color, а также выбирает выделенный текст родительского и дочернего элементов (::selection). Для каждого элемента <div> задаётся свой цвет background-color, а для выделения родительского элемента задаётся другой цвет текста — color.

/* Style for the parent element */
.parent {
  color: blue;
}

/* Style for the parent's selected text */
.parent::selection {
  background-color: yellow;
  color: red;
}

/* Style for the child element */
.child {
  color: green;
}

/* Style for the child's selected text */
.child::selection {
  background-color: orange;
}

Результат выглядит так:

Попробуйте выделить текст в родительском и дочернем элементах. Обратите внимание:

1. При выделении текста родительского элемента используются жёлтый фон и красный цвет текста, заданные в .parent::selection.
2. При выделении текста дочернего элемента используются:
   • Оранжевый фон из .child::selection.
   • Красный цвет текста, унаследованный от псевдоэлемента ::selection родительского элемента.

Это показывает, как псевдоэлемент подсветки дочернего элемента наследует свойства и от родительского элемента, и от псевдоэлемента подсветки родителя.

Пользовательские свойства CSS (переменные) в псевдоэлементах подсветки наследуются от исходного элемента (элемента, к которому они применяются), а не по цепочке наследования подсветки. Например:

:root {
  --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

При использовании универсального селектора с псевдоэлементами подсветки наследование подсветки предотвращается. Например:

/* This prevents highlight inheritance */
*::selection {
  color: lightgreen;
}

/* Prefer this to allow inheritance */
:root::selection {
  color: lightgreen;
}

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

См. также

• Модуль псевдоэлементов CSS
• Псевдоклассы
• Модуль селекторов CSS
• Изучение: псевдоклассы и псевдоэлементы
• Изменения наследования при оформлении выделения в CSS — подробное объяснение изменений модели наследования псевдоэлементов подсветки в Chrome 134