CSS-псевдокласс `:heading()`

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

Синтаксис

:heading( <integer># ) {
  /* ... */
}

Параметры

Функция псевдокласса :heading() принимает список разделённых запятыми значений <integer>, соответствующих уровням заголовков, для которых нужно задать стили.

Примечания по использованию

Функциональный псевдокласс :heading() соответствует только элементам, семантически распознаваемым как заголовки. Он не соответствует элементам, использующим атрибуты role="heading" или 'aria-level'.

Уровень заголовка, используемый :heading(), может отличаться от уровня, заданного селектором типа элемента, если браузер вычисляет для него другой отображаемый уровень заголовка. Например, h1:heading(3) будет соответствовать любому элементу <h1>, который отображается как заголовок третьего уровня.

Примеры

Выбор определённых уровней заголовков

В этом примере список значений, разделённых запятыми, используется для выбора заголовков нечётных уровней (<h1> и <h3>) и чётных уровней (<h2> и <h4>).

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

:heading(1, 3) {
  color: tomato;
}
:heading(2, 4) {
  color: slateblue;
}

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

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

См. также

• :heading