Heading pseudo-classes
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
:heading Experimental | | | Preview | | | |
| Other | ||||||
css.selectors.headingfunction Experimental `:heading()` | | | Preview | | | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Syntax
CSS
:heading {
font-family: 'Noto Sans JP', sans-serif;
}
:heading(1, 2) {
color: #333;
border-bottom: 2px solid currentColor;
}Live demo
Use cases
-
Using Heading pseudo-classes
Experimental: This is an experimental technology
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.