CSS :heading() 擬似クラス
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
:heading() は CSS の擬似クラスで、見出し要素のうち、カンマ区切りの整数のリストとレベルが一致するものすべてを表します。これにより、特定の見出しレベルの要素を個別に一致させてスタイルを設定するのではなく、まとめてスタイルを設定することができます。
メモ:
関数型擬似クラス :heading() は、クラスセレクターと同じ詳細度、つまり 0-1-0 を持ちます。例えば、section:heading() の詳細度は 0-1-1 となります。
構文
:heading( <integer># ) {
/* ... */
}
引数
:heading() 擬似クラス関数は、スタイル設定を行う見出しレベルを表す <integer> のカンマ区切りリストを受け取ります。
使用上のメモ
:heading() 関数型擬似クラスは、意味的に見出しとして認識される要素にのみ一致します。role="heading" や 'aria-level' 属性を使用している要素には一致しません。
ブラウザーが異なる公開見出しレベルを算出する場合、:heading() で使用される見出しレベルは、要素の要素型セレクターとは異なることがあります。例えば、h1:heading(3) は、レベル 3 の見出しとして公開されている <h1> 要素すべてに一致します。
例
特定の見出しレベルを選択
この例では、カンマ区切りの値のリストを使用して、奇数レベルの見出し（<h1> および <h3>）と偶数レベルの見出し（<h2> および <h4>）を対象としています。
<h1>見出し 1</h1>
<h2>見出し 2</h2>
<h3>見出し 3</h3>
<h4>見出し 4</h4>
:heading(1, 3) {
color: tomato;
}
:heading(2, 4) {
color: slateblue;
}
仕様書
| 仕様書 |
|---|
| Selectors Level 5 # headings |