CSS の セレクターリスト (,
) は,すべての一致するノードを選択します。
/* すべての一致する要素を選択 */
span,
div {
border: red 2px solid;
}
スタイルシートの大きさを縮小するために、グループセレクターをカンマ区切りのリストにすることができます。
構文
element, element, element { style properties }
事例
単一行のグループ化
カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
複数行のグループ化
カンマ区切りのリストを使用して複数行にしたグループ化セレクターです。
#main,
.content,
article {
font-size: 1.1em;
}
セレクターリストの無効化
セレクターリストを使用する欠点は、以下のものが等価ではないことです。
h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
これは、セレクターリスト内に未対応のセレクターが一つでもあった場合は、規則全体が無効化されてしまうためです。
この対策方法としては、 :is()
セレクターを使用すれば、単純に引数内の無効なセレクターを無視しますが、 :is()
の詳細度の計算方法の影響で、すべてのセレクターの重みが同じ詳細度になります。
h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Selectors Level 4 Selector Lists の定義 |
草案 | 「セレクターリスト」に改名 |
CSS Level 1 grouping の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。