こんにちは、ティウェブ佐藤です。

みなさん、CSSセレクタ（の、疑似クラス）の:has()はご存知でしょうか？

2023年末にFirefoxでも:has()がサポートされ、すべての主要ブラウザが対応したことにより、これからは一般的に使用されることになりそうです。

そこで今回は、:has() :is() :where()をマスターするための第一歩として、その特徴や使い方をまとめてみました。

:has() :is() :where()の使い方

一般的に浸透している:not()と同じよう()の中に要素を記述することでCSSを反映できます。

section:has( h1, h2, h3 ) {
  color: #000; //「h1」「h2」「h3」の要素を持つ「section」にCSSを反映
}

section :is( h1, p, div ) {
  color: #000; //「section」の中にある「h1」「p」「div」の要素にCSSを反映
}

section :where( h1, p, div ) {
  color: #000; //「section」の中にある「h1」「p」「div」の要素にCSSを反映
}

:has() :is() :where()の特徴と違い

:has()の特徴

指定した親要素内に特定の子要素が存在する場合にCSSを適用できます。

これまでは、指定した要素内に特定の要素が存在するかどうかの判定を主にJavaScriptで行っていましたが、:has()を使うことでCSSのみで完結できるようになりました。

さらに他にもできることがありますが、今回は割愛します。

参照）
Selectors Level 4「4.5. The Relational Pseudo-class: :has()」
（W3C CSS Working Group Editor Drafts）

:is()と:where() の特徴

複数の要素に同じスタイルを適用する場合、要素が多いとCSSの記述が増えますが、:is()や:where()は一括でスタイルを指定することができるので、記述を短くすることができます。

section h1,
section p,
section div, {
  color: #000;
}

section :is( h1, p, div ) { //「:is」を使用した場合の記述
  color: #000;
}

section :where( h1, p, div ) { //「:where」を使用した場合の記述
  color: #000;
}

上記のように複数行になっているCSSが短くまとめられます。

複雑なCSSはこれらをうまく利用することで管理がしやすくなりそうですね。

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

2つの違いは詳細度（CSSの優先度）の違いです。

:is( )には詳細度の値がありますが、:where()の詳細度に値がありません。

詳細度に値がない:where()セレクタを使うと優先順位が一番低くなるため、あとからスタイルを上書きするときに便利です。

参照）
Selectors Level 4
「4.2. The Matches-Any Pseudo-class: :is()」
「 4.4. The Specificity-adjustment Pseudo-class: :where()」
（W3C CSS Working Group Editor Drafts）

まとめ

新しいCSSセレクタ:has():is():where()はいかがでしたか？

個人的に:has()はChromeブラウザの対応前から期待しておりましたので、主要ブラウザ全てに対応されたと聞いてとても嬉しかったです。

CSSの進化はまだまだ続いていくため、今まで当たり前だと思っていたCSSの知識も定期的に見直していきましょう。

最後までお読みいただきありがとうございました。