The :heading() CSS pseudo-class function represents all heading elements that match a value calculated using the An+B notation. This allows you to style elements at specific heading levels at once, rather than matching and styling them individually.

Syntax

:heading([ <An+B> [, <An+B>]* | even | odd ]) {
  /* ... */
}

Parameters

The :heading() pseudo-class function takes a comma-separated list of An+B expressions or keyword values that describe a pattern for matching heading elements.

Keyword values

odd

Represents the heading elements whose numeric position is odd: <h1>, <h3>, and <h5>.

even

Represents the heading elements whose numeric position is even: <h2>, <h4>, and <h6>.

Functional notation

<An+B>

Represents the heading elements whose numeric position matches the pattern An+B, for every positive integer or zero value of n, where:

• A is an integer step size,
• B is an integer offset,
• n is all nonnegative integers, starting from 0.

It can be read as the An+B-th element of a list. The A and B must both have <integer> values.

Usage notes

The :heading() functional pseudo-class matches only elements that are semantically recognized as headings. It does not match elements with a role="heading" attribute, nor does it respect the 'aria-level' ARIA attribute.

Examples

Using keyword parameters

In this example, the odd keyword matches headings with odd-numbered levels, which are <h1> and <h3>. The even keyword is used to target even-numbered heading levels, <h2> and <h4>.

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

:heading(odd) {
  color: tomato;
}
:heading(even) {
  color: slateblue;
}

Using the An+B notation

<h1>Science</h1>
<h2>Physics</h2>
<h3>Atomic, molecular, and optical physics</h3>
<h4>Optical physics</h4>
<h5>X-Rays</h5>
<h6>Discovery</h6>

/* Targets headings <h3> and <h4> */
:heading(3, 4) {
  font-weight: 100;
}
/* Targets headings in reverse starting from <h3> */
:heading(-n + 3) {
  color: tomato;
}
/* Targets every third heading starting from <h1> */
:heading(3n + 1) {
  font-style: italic;
}
/* Targets headings after level 5 */
:heading(n + 5) {
  color: slateblue;
}

In this example:

• :heading(3, 4) matches the <h3> and <h4> elements
• :heading(-n + 3) matches heading elements in reverse, so <h3>, <h2>, and <h1>
• :heading(3n + 1) matches every third (3n) heading element starting from <h1>, so this would include <h1> and <h4>
• :heading(n + 5) matches heading elements starting from <h5> and will include <h6>

Specifications

Browser compatibility

See also

• :heading