【CSS】複数のセレクタの同じ部分をまとめる方法【:whereの使い方】

同じ親の中にある別のセレクタだったり、違う親の中にある同じ名前のセレクタを指定するとき、同じ部分を何度も指定するのなんだか気持ち悪いですよね？

複数のセレクタの同じ部分をまとめる方法を解説します。

:where()を使う

:where()は同じ部分をまとめることができる疑似クラスです。

例1）子要素が共通

.a .example,.b .example,.c .example{
    display: block;
}

↓↑同じ

:where(.a,.b,.c) .example{
    display: block;
}

異なる要素部分を:where()内に入れ、共通している「.example」を子要素にします。

例2）親要素が共通

.example .a,.example .b,.example .c{
    display: block;
}

↓↑同じ

.example :where(.a,.b,.c){
    display: block;
}

共通している「.example」を親として、異なる要素部分を:where()内に入れます。

数学でいう「共通項」や「分配」の関係とよく似ています。

この右項の()がまさに:where()というわけです。

ブラウザの互換性

:where()はIE以外の最新版のブラウザで有効です。

ただし、現在はIEのサポートがきれており、IEの利用者はまずいないため、問題なく使っていいでしょう。

:where()と:is()の違い

「:where()」とほぼ同じ機能を持つ「:is()」という疑似クラスがあります。

両者の違いは詳細度（優先度）の上昇があるかどうかです。

例えば「:first-child」のような疑似クラスはclass同様10ポイント詳細度があがります。

同様に「:is()」を使うと10ポイント詳細度があがります。

一方「:where()」は詳細度は0であり、あがりません。

よって「:where()」のほうが詳細度を気にせず使うことができます。