選択子列挙

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 }

仕様

ブラウザ間の互換性

参考

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