セレクターリスト

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

/* すべての一致する要素を選択 */
span,
div {
  border: red 2px solid;
}

スタイルシートの大きさを縮小するために、グループセレクターをカンマ区切りのリストにすることができます。

構文

element, element, element { スタイルプロパティ }

カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。

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() や :where() セレクターを使用すれば、セレクターリストを寛容に受け止めることができます。こうすると、リスト内の無効なセレクターは無視しますが、有効なセレクターは受け入れます。

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 }

Specification
Unknown specification # grouping

BCD tables only load in the browser