:heading擬似クラスと:heading()関数で見出しをまとめてスタイリングする

ページのベースとなるスタイルをつくるときに、見出しを :is(h1, h2, h3, h4, h5, h6) { ... } のようにまとめてスタイルを当てることがある。

それをシンプルかつ、詳細度を制御してスタイリングするために:heading擬似クラスと:heading()関数という新しいCSSセレクターが検討されている。

2026年3月の執筆時点では、Firefox NightlyやSafari TPのみで利用可能。

従来の方法: `is()`や列挙

:is()やh1, h2, h3, h4, h5, h6のように列挙してスタイルを当てていた。しかし、どちらも要素セレクターになるため0-0-1の詳細度になり他のスタイルと競合しやすい。

:is(h1, h2, h3, h4, h5, h6) {
  font-weight: 800;
  text-transform: capitalize;
}

:heading疑似クラスを使うと0-1-0の詳細度になるため、管理しやすくなる。また、見出しと判断されるものを一括して指定できるため、CSSセレクターがシンプルになる。

:heading {
  font-weight: 800;
  text-transform: capitalize;
}

:heading()関数は、:headingに似ているが見出しレベルを指定してスタイルを当てることができる。こちらも:heading同様に0-1-0の詳細度になる。

/* h1, h3, h5 */
:heading(1, 3, 5) {
  /* ... */
}

/* h2, h4, h6 */
:heading(2, 4, 6) {
  /* ... */
}