選択子列挙

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

凡例

完全対応  
完全対応

参考

  • :is()  及び:where()  疑似クラスは,選択子列挙の無効化という古来の間違いを引き起しません。