: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
Loading…