今回は、CSSをまとめて記述する際に使いやすい「where:()」を紹介します。
CSSの擬似クラス関数で、複数のセレクタを1つにまとめることができます。
「where:()」以外にも、同じく複数のセレクタをまとめることができる「:is()」などがありますが、「where:()」の場合はCSSの詳細度を持たないため、スタイルを上書きする際に使いやすいです。
※詳細度とは、CSSのスタイルが重複した際どの指定が優先して適用されるかをブラウザーが決める手段です。
CSSには優先順位があり、セレクタを使用し計算します。その結果が詳細度として数値化され、より詳細度が高いスタイルが適用されます。
例として、headerとmainの「<p>」タグに同じクラス名「.color」を付け、色を指定します。
以下HTML、CSSです。
<header>
<p class="color">CSS詳細度を持たないので使いやすい！</p>
</header>
<main>
<p class="color">where:() とは</p>
</main>
CSSで、通常まとめて記述する場合
header .color, main .color{
color: pink;
}になりますが、「where:()」の書き方は、
:where(header, main) .color{
color: pink;
}になります。
これでどちらも、header、mainの中、指定した箇所の色が変更されます。
そして、ここからが「where:()」 が使いやすいところです。後から色を変更する場合、「where:()」は詳細度をもたないので、「.color」のクラス名（セレクタ）だけで上書きが可能になります。
:where(header, main) .color{
color: pink;
}
.color{
color: blue
}先程の、通常まとめて記述する場合ですと、同じようにまとめて書き、下に記述をしないと優先度が上がらず、「.color」のクラス名（セレクタ）だけではスタイルが効きません（「!important」を使用すれば効きますが、ブラウザがどのスタイルを優先するか混乱するので、どうしてもという場合以外お勧めしません）。
header .color, main .color{
color: pink;
}
header .color, main .color{
color: blue
}特定の理由で要素の詳細度を上げる必要がある場合以外、セレクタをまとめる際に詳細度をもたない「where:()」は使いやすいです。ぜひ試してみてください。
