[CSS] 疑似クラス is() とwhere() の使い方と違い

CSSの比較的新しい疑似クラス :is() と :where() の使い方と違いについてまとめました。

:is()

:is() の括弧内に複数のセレクタをカンマ区切りで指定すると、異なるセレクタにまとめて同じスタイルを適用できます。

:where()

:where() の構文と機能は、 :is() と同じです。

 

では、両者はどこが違うのでしょうか？

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

:is() と :where() の違いは、セレクタの詳細度（優先度）にあります。

言葉では分かりにくいので、以下のサンプルを見てみましょう。

 

 

実行結果

 

→ where の .sample1 だけが緑色に上書きされました。

 

上記のコードから、sample1に関わる部分だけを抜き出すと次のようになります。

 

・:is() は、セレクタ全体の詳細度に影響します。
　.is-example :is(.sample1) a はクラスセレクタを2つ以上含むため、.sample1 a よりも詳細度が高く、赤色が優先されます。

・:where() は、括弧内のセレクタが何であっても、詳細度は常に0 になります。
　そのため、.where-example :where(.sample1) a よりも .sample1 a が優先され、緑色が適用されます。

 

セレクタの詳細度についてさらに学びたい方はこちらの記事もチェックしてみてください。