Limited supportLimited browser support. Check compatibility before use.
Selectors Limited support

Heading pseudo-classes

The :heading and :heading() CSS pseudo-classes match headings of varying levels. The :heading pseudo-class matches any heading (<h1> through <h6>). The :heading() selector matches any of the given levels. For example, :heading(1, 2) matches headings level 1 and 2.

Selectors

Overview

The :heading and :heading() CSS pseudo-classes match headings of varying levels. The :heading pseudo-class matches any heading (<h1> through <h6>). The :heading() selector matches any of the given levels. For example, :heading(1, 2) matches headings level 1 and 2.

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

allheadingkeep Consistent

CSS allheadingkeep consistent demo.

PreviewFullscreen

Mainheading

CSS Mainheading demo.

PreviewFullscreen

decoratedheading

CSS decoratedheading demo.

PreviewFullscreen

Use cases

  • Using Heading pseudo-classes

    The :heading and :heading() CSS pseudo-classes match headings of varying levels. The :heading pseudo-class matches any heading (<h1> through <h6>). The :heading() selector matches any of the given levels. For example, :heading(1, 2) matches headings level 1 and 2.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features