`:where()`を使うと、複数の選択肢から一つを選ぶことができます。 ~~~css section:where(.btn-1, .btn-2, ...) { background-color: red; } ~~~ これは、例えば、ページの中にある特定のボタンだけを選んで色を変えたいときなどに使います。ただし、**`:where()` 内のセレクターは詳細度が 0 になります。** これは、他のスタイルの優先順位が`:where()`の中のルールよりも強くなることを防ぐためです。 ## 例1: 文字色をスタイルの優先順位に沿って入れ替える - `:is()` - `:where()` これらは、どちらも複数のセレクタをグループ化するための便利な関数です。 **ただし、これらの関数の大きな違いは`スタイルの優先順位`です。** `:is()`は引数内のセレクタの優先度を保持します。一方、`:where()`はその優先度を 0 にリセットします。 ~~~html-preview

:is()のText1

:is()のText2

:where()のText1

where()のText2

~~~ ### :is()セレクタによるスタイリング: `.isContent`内の`.text1`と`.text2`の文字色をピンク色`(#ff0088)`に設定しています。 ### :where()セレクタによるスタイリング `.whereContent内の.text1と.text2の文字色をオレンジ色に設定しています。 ### `.text2`セレクタによるスタイリング: すべての`.text2`の文字色を緑色に上書きしています。 `:is()`の場合、詳細度が`:is()`の方が上なので、文字色が上書きされません。しかし、`:where()`の場合、`:where()`内のセレクタの詳細度が0になるので、文字色が上書きされて緑になります。

スキル図鑑

クイズにチャレンジしよう！

関連チャレンジ