#HTML・CSS・JavaScript

【CSSの疑似クラス】:is()と:where()って何？違いは？

疑似クラスの:is()と:where()をご紹介。
この2つ、挙動が一見そっくりなんです。間違えないように、それぞれの違いも見ていきます。

この記事で分かること

:is()も:where()も、複数セレクタをまとめて記述するための擬似クラス
状況によって両者の結果が変わる事がある

Webデザインとブログで豊かに引きこもる。

Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。

:is()

:is()を使うと、複数のセレクタをまとめて記述することができます。
説明するより見た方がわかりやすいので、早速サンプルコードです。

:is(.sample1, .sample2, .sample3) a{
  color: red;
}

/* これと同義です */
.sample1 a, .sample2 a, .sample3 a{
  color: red;
}

<p class="sample1"><a href="#">Link</a></p>
<p class="sample2"><a href="#">Link</a></p>
<p class="sample3"><a href="#">Link</a></p>

実行すると、全てのa要素が赤色になります。
Sassなどを使っているとあまりありがたみを感じないかもしれませんが、ピュアなCSSにおいて、使い所によってはコードの短縮に役立ちます。

:where()

:where()も、利用することで複数のセレクタをまとめて記述することができます。
早速サンプルコードです。

:where(.sample1, .sample2, .sample3) a{
  color: red;
}

/* これと同義です */
.sample1 a, .sample2 a, .sample3 a{
  color: red;
}

<p class="sample1"><a href="#">Link</a></p>
<p class="sample2"><a href="#">Link</a></p>
<p class="sample3"><a href="#">Link</a></p>

実行すると、全てのa要素が赤色になります。
…ってあれ？これだと:is()と変わらないですよね。

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

両者の挙動は、例えばこんな時に差が出ます。

<div id="isSample">
  <p class="sample1"><a href="#">is：Sample1</a></p>
  <p class="sample2"><a href="#">is：Sample2</a></p>
  <p class="sample3"><a href="#">is：Sample3</a></p>
</div>
<div id="whereSample">
  <p class="sample1"><a href="#">where：Sample1</a></p>
  <p class="sample2"><a href="#">where：Sample2</a></p>
  <p class="sample3"><a href="#">where：Sample3</a></p>
</div>

/* :is()では全部赤に設定 */
#isSample :is(.sample1, .sample2, .sample3) a{
  color: red;
}

/* :where()では全部オレンジに設定 */
#whereSample :where(.sample1, .sample2,　.sample3) a{
  color: orange;
}

/* 最後に.sample3 aを青文字に上書き */
.sample3 a {
  color: blue;
}

実行するとこのような結果になります。

青文字に上書きされたのは、whereの方だけです。

通常のCSSでは、先に書かれた内容は後に書かれた内容に上書きされます（一部の例外アリ）
:where()による実装はこのルール通りに適応されますが、:is()の場合はセレクタの詳細度に応じて優先順位が変わります。

先程のコードにおいて、『#isSample .sample3 a』に関係するセレクタだけを抜き出すと、こんな感じになりますよね。

/* 赤にする */
#isSample .sample3 a{
  color: red;
}

/* 青にする */
.sample3 a {
  color: blue;
}

この場合、赤文字にするためのセレクタの方が詳細度が高い（セレクタ定義が詳しく記述されている）ため、こちらが採用されます。
これが:is()と:where()の違いです。

まとめ

:is()と:where()まとめ

:is()も:where()も、複数セレクタをまとめて記述するための擬似クラス
セレクタ定義の詳細度によって、両者の挙動に差が出る事がある

紹介しておいて今更ですが、利用することによって特別大きなメリットが得られるわけではないので、ややこしいと感じる場合はムリして使う必要はないと思います。

とはいえ、自らは利用しないにしても、リセット/ノーマライズ用CSSや、jQueryのプラグイン等に同梱されたCSSの中で:is()や:where()が使われているケースは大いにあります。
そうした外部ファイルが上手く調整できないなという時、もしかしたら両者の役割や特徴を整理することで解決できるかもしれません。

【CSSの疑似クラス】:is()と:where()って何？違いは？

:is()

:where()

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

まとめ

Related Posts