`:heading()` CSS pseudo-class

Baseline Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The :heading() CSS pseudo-class function represents all heading elements whose levels match a comma-separated list of integers. This allows you to style elements at specific heading levels at once, rather than matching and styling them individually.

Note: The :heading() functional pseudo-class has the same specificity as a class selector, that is, 0-1-0. For example, section:heading() has a specificity of 0-1-1.

Syntax

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

Parameters

The :heading() pseudo-class function takes a comma-separated list of <integer>s that represent the heading levels to be styled.

Usage notes

The :heading() functional pseudo-class matches only elements that are semantically recognized as headings. It does not match elements that use role="heading" or 'aria-level' attributes.

The heading level used by :heading() may be different from an element's type selector in cases where the browser computes a different exposed heading level. For example, h1:heading(3) will match any <h1> element that is exposed as a level 3 heading.

Examples

Selecting specific heading levels

In this example, a comma-separated list of values is used to target headings at odd-numbered levels (<h1> and <h3>) and even-numbered levels (<h2> and <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;
}

Specifications

Specification
Selectors Level 5 # headings

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`headingfunction`	No	No	preview	No	No	No	No	No	No	No	No	No