セレクターリスト

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

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

span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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() セレクターと寛容なセレクターリストパラメーターは詳細度の重みに作用しません。

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

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

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

• 擬似クラス :is()、:where()、:not()、:has() は、寛容なセレクターリストを受け付けます。
• CSS セレクター