headingfunction | CSS Selectors & Pseudo-classes

An experimental pseudo-class function that targets a heading of a specific level or relative level (e.g., :heading(2) for h2).

Quick example

:heading(1) {
  /* Specifically targets top-level headings */
  font-size: 3rem;
  text-transform: uppercase;
}

Limited availability Unknown global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

preview+