Use the :heading pseudo-selector to style all headings (h1-h6) with a single CSS rule. Reduce repetition in design systems and component libraries while maintaining consistency.

Always Twisted

The `:heading` pseudo-selector allows targeting all heading elements (h1-h6) with a single CSS rule instead of listing them individually. It has class-level specificity (0-1-0) and supports functional notation like `:heading(1, 2)` for grouping levels. Currently available only in Firefox Nightly and Safari Technology Preview, it's particularly useful in design systems for setting consistent typography across components while reducing code repetition. Combined with CSS custom properties, it enables overrideable defaults that cascade naturally throughout a codebase.

Style Headings using the CSS :heading pseudo-selector