Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

Heading pseudo-classes

実験的: これは実験的な技術です

本番環境で使用する前に、ブラウザーの互換性表を注意深く確認してください。

`:heading` CSS 擬似クラスは、文書内のすべての見出し要素に一致します。

疑似クラス見出し

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:heading
実験的
Preview
その他
css.selectors.headingfunction
実験的

`:見出し()`
Preview
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります

基本構文

CSS 
:heading {
  font-family: 'Noto Sans JP', sans-serif;
}
:heading(1, 2) {
  color: #333;
  border-bottom: 2px solid currentColor;
}

ライブデモ

allheadingkeep Consistent

CSS allheadingkeep consistent demo.

プレビュー全画面表示

Mainheading

CSS Mainheading demo.

プレビュー全画面表示

decoratedheading

CSS decoratedheading demo.

プレビュー全画面表示

実務での使いどころ

  • 見出しの一括スタイリング

    h1〜h6をまとめて選択したり、特定レベルの見出しだけを選択して、効率的にスタイルを適用します。

注意点

  • 2026年3月時点でどのブラウザでもサポートされていないため、実用段階にはありません。

アクセシビリティ

  • 見出しの視覚的なスタイルを変更する際は、論理的な見出し階層（h1→h2→h3）を維持してください。

参考リンク