Псевдокласс CSS `:heading`

:heading — это CSS-псевдокласс, который выбирает все элементы заголовков в документе.

Синтаксис

:heading {
  /* ... */
}

Описание

Псевдокласс :heading позволяет стилизовать все заголовки сразу, вместо того чтобы выбирать и стилизовать их по отдельности.

Этот псевдокласс выбирает только элементы, которые по умолчанию семантически распознаются как заголовки (<h1>–<h6>). Элементы с role="heading" не выбираются; их можно выбрать с помощью селектора атрибутов [role="heading"].

Псевдокласс :heading имеет такую же специфичность, как селектор класса, то есть 0-1-0. Поэтому :heading имеет специфичность 0-1-0, тогда как h1, h2, h3, h4, h5, h6 имел бы специфичность 0-0-1, а section:heading — 0-1-1.

Примеры

Стилизация всех заголовков

В этом примере мы используем псевдокласс :heading для стилизации заголовков разных уровней.

HTML

Документ содержит заголовки трех разных уровней, а также абзацы — элементы <p>.

<h1>Mastering CSS</h1>
<h2>Chapter 1: Selectors</h2>
<p>
  A CSS selector is the part of a CSS rule that describes what elements in a
  document the rule will match.
</p>
<h3>1.1 Pseudo-classes</h3>
<p>
  CSS pseudo-classes enable selecting elements based on information that lies
  outside of the document tree.
</p>

CSS

Мы задаем элементам заголовков курсивное начертание и томатно-красный цвет.

:heading {
  color: tomato;
  font-style: italic;
}

Результаты

Псевдокласс :heading применяет свойства color и font-style ко всем заголовкам документа, но не к абзацам:

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

Совместимость с браузерами

См. также

• :heading()