:heading()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
The:heading()CSSpseudo-class function represents allheading 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 samespecificity as a class selector, that is,0-1-0. For example,section:heading() has a specificity of0-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 userole="heading" or'aria-level' attributes.
The heading level used by:heading() may be different from an element'stype 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
Loading…