The heading selector I've been waiting so long for is finally here! (sort of)

Summary

Kevin Powell introduces two CSS pseudo-classes recently implemented in Firefox Nightly and currently available behind a flag: :heading and :heading().

:heading

The :heading pseudo-class selects heading elements at any level, effectively targeting h1 through h6. It can simplify component styling when a title’s heading level varies by context. For example, a product-card title can share a style without adding a class or listing every heading level.

Powell demonstrates combining :heading with selectors such as :first-child to style a component’s main heading. :first-of-type is another option when the first heading should be selected even if it isn’t the first child. He favors approaches that support sound document structure and accessibility.

Other potential uses include styling headings in articles or asides, working with Markdown-generated content that lacks custom classes, and consistently styling elements such as spans inside headings.

:heading()

The :heading() pseudo-class selects headings by level using an An+B-style argument. Examples include:

• :heading(1, 2, 4) to select specific heading levels
• :heading(even) to select h2, h4, and h6
• :heading(odd) to select h1, h3, and h5

Powell sees fewer everyday uses for this function, though he suggests alternating heading-level styles in print as one possibility. He invites viewers to share other ideas.

Browser support remains experimental. Powell hopes that greater awareness will encourage other browsers to implement the selectors.

Workshop Announcement

Powell mentions a free CSS Grid workshop in his Discord community, scheduled for September 19. He plans to hold workshops regularly.

Source

Kevin Powell presents the demonstrations and analysis.