W3cubDocs

/CSS

:heading

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 matches all heading elements in a document. This allows you to style all headings at once, rather than matching and styling them individually.

This pseudo-class matches only elements that by default are semantically recognized as headings (<h1> through <h6>). Elements with role="heading" are not matched; you can select those by using the [role="heading"] attribute selector.

Note: The :heading pseudo-class has the same specificity as a class selector, that is, 0-1-0. So :heading would have a specificity of 0-1-0, and section:heading would have a specificity of 0-1-1.

Syntax

:heading {
  /* ... */
}

Examples

Styling all headings

The document in this example contains headings at three different levels.

<h1>Mastering CSS</h1>
<h2>Chapter 1: Selectors</h2>
<h3>1.1 Pseudo-classes</h3>

:heading {
  color: tomato;
}

The :heading pseudo-class applies the color to all the headings in the document:

The :heading pseudo-class applies the color to all the headings in the document.

Specifications

Specification
Selectors Level 5> # headings>

Browser compatibility