CSSの:is()と:where()を使ってみる

CSSの:is()と:where()を使ってみて、挙動を比べてみます。

対応ブラウザ

:is()、:where()共にIEでは非対応ですが、それ以外の主要なブラウザでは対応しています。

サンプルコード

:is()と:where()は挙動がほぼ同じで、引数に設定したセレクターのリストをのうち、条件に合う要素を選択する擬似クラスです。

<section>
  <h1>heading 1</h1>
</section>
<section>
  <h2>heading 2</h2>
</section>
<section>
  <h3>heading 3</h3>
</section>

このsectionの中のh1〜h3に対して同じスタイルを設定する例で試してみます。
まずは:is()の場合です。

/* before  */
/*
section h1,
section h2,
section h3 {
	color: orange;
}
*/

/* after  */
section :is(h1, h2, h3) {
	color: orange;
}

:is()を使わずに記述する場合は3〜7行目のようになりますが、:is()を使うと11〜13行目のように記述できます。
:is()のデモページ

次に:where()の場合です。

/* before  */
/*
section h1,
section h2,
section h3 {
	color: orange;
}
*/

/* after  */
section :where(h1, h2, h3) {
	color: orange;
}

:is()を:where()に変えたのみですが、挙動としては同じです。
:where()のデモページ

このように:is()と:where()は挙動が同じですが、:where()は詳細度が常に0という点が異なります。
例として、:is()を使用する前にh2の色を設定する記述を追加してみます。

section h2 {
	color: purple;
}

/* before  */
/*
section h1,
section h2,
section h3 {
	color: orange;
}
*/

/* after  */
section :is(h1, h2, h3) {
	color: orange;
}

この場合はコード上の後に記述されている:is()の方で表示されます。
:is()のデモページ2

:where()の方でも同じように記述を追加してみます。

section h2 {
	color: purple;
}

/* before  */
/*
section h1,
section h2,
section h3 {
	color: orange;
}
*/

/* after  */
section :where(h1, h2, h3) {
	color: orange;
}

この場合は:where()部分の詳細度が0のため、コード上の先に記載している方で表示されます。
:where()のデモページ2

:is()の詳細度の注意点として、引数に指定したセレクターのうち条件に当てはまるセレクタの詳細度ではなく、引数に指定したセレクタ全体で最も詳細度の高いものになります。

<section>
  <h1 class="heading-1">heading-1</h1>
</section>
<section>
  <h1 class="heading-2">heading-2</h1>
</section>

:is()で詳細度の高いIDの指定を使ってみます。

section :is(.heading-1) {
	color: orange;
}
section .heading-1 {
	color: purple;
}

section :is(.heading-2, #dummy) {
	color: orange;
}
section .heading-2 {
	color: purple;
}

この場合、.heading-1 は後に書いた内容で上書きされ紫色になりますが、.heading-2 は :is() にIDでの指定が含まれているため詳細度が高く、後に書いた内容で上書きされずオレンジ色のままになります。
:is()のデモページ3