セレクターリスト

CSS の セレクターリスト (selector list) (,) は,すべての一致するノードを選択します。

/* すべての一致する要素を選択 */
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 の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Selector list (,)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報

  • The :is() および :where() 擬似クラスは、セレクターリストの無効化の古い間違いを起こしません。