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

:is()のText1

:is()のText2

:where()のText1

where()のText2

~~~ ### :is()セレクタによるスタイリング: `.isContent`内の`.text1`と`.text2`の文字色をピンク色に設定しています。 ### :where()セレクタによるスタイリング `.whereContent`内の`.text1`と`.text2`の文字色をオレンジ色に設定しています。 ### .text2セレクタによるスタイリング: すべての`.text2`の文字色を緑色に上書きしています。しかし、優先度の関係で、`:is()`の指定の方が優先度が高いので、上書きできません。 `:where()`に対しては、優先度がゼロになっているため、文字を緑色に上書きできます。

スキル図鑑

.css-x7cx95{padding:var(--chakra-space-2);}@media screen and (min-width: 600px){.css-x7cx95{padding:0px;}}:not()

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

:not()