セレクターリスト

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS の セレクターリスト (selector list) (,) は、すべての一致するノードを選択します。セレクターリストはカンマ区切りのセレクターのリストです。

概要

複数のセレクターが同じ宣言を共有しているときは、カンマ区切りのリストにまとめることができます。セレクターリストはいくつかの関数型 CSS 擬似クラスのパラメーターとして与えることもできます。空白文字がカンマの前後に入る場合もあります。

次の 3 つの宣言は等価です:

css
span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}
css
span,
div {
  border: red 2px solid;
}
css
:is(span, div) {
  border: red 2px solid;
}

異なる基準でマッチする要素に同じスタイルを適用するときは、セレクターをカンマ区切りのリストにまとめると、一貫性が得られると同時にスタイルシートの容量も削減できます。

単一行のグループ化

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

css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}

複数行のグループ化

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

css
#main,
.content,
article,
h1 + p {
  font-size: 1.1em;
}

セレクターリストの有効、無効について

無効なセレクターは、何にもマッチしないことを表します。セレクターリストが無効なセレクターを含むとき、スタイルブロックのすべてが無視されます。寛容なセレクターリストを受け付ける関数型擬似クラスは例外です。

無効なセレクターリスト

セレクターリストを使用する欠点は、セレクターリスト内に未対応のセレクターが一つでもあった場合に、ルール全体が無効化されてしまうことです。

次の 2 つの CSS ルールについて考えてみましょう:

css
h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
css
h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}

これらは等価ではありません。1 つ目のルールセットでは h1 要素と h3 要素にスタイルが適用されますが、h2:invalid-pseudo ルールはパースされません。2 つ目のルールセットでは、リスト内の 1 つのセレクターが無効なため、ルール全体がパースされません。リスト内のいずれかのセレクターが無効ならスタイルブロック全体が無視されるため、h1 要素にも h3 要素にもスタイルが適用されません。

寛容なセレクターリスト

無効なセレクターリスト問題を解決する方法は、寛容なセレクターリストを受け付ける :is():where() 擬似クラスを使うことです。寛容なセレクターリストの中のそれぞれのセレクターは個別にパースされます。すると、リスト内の無効なセレクターは無視されますが、有効なセレクターは使用されます。

先程の例と比べ、次の 2 つの CSS ルールセットは等価です:

css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}

:is() の詳細度は引数の中で最も高いものとなりますが、:where() セレクターと寛容なセレクターリストパラメーターは詳細度の重みに作用しません。

寛容な相対セレクターリスト

寛容な相対セレクターリストは、寛容なセレクターリストと似ています。リストの要素を、明示的か暗黙的な結合子から始まる相対セレクターとして解釈します。

css
h2:has(+ p, > ul::after, + ul.red) {
  font-style: italic;
}

この例だと <p><ul class="red"> がすぐ後にある h2 は斜体になります。寛容な相対セレクターリスト :has() の中で擬似要素は無効ですが、リストが寛容なのでセレクターを壊すことはありません。

仕様書

Specification
Selectors Level 4
# grouping

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Selector list (,)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報