CSSを便利に！:has, :is, :whereを解説

2025年1月23日

目次 [ close ]

はじめに

CSSには、特定の条件に応じてスタイルを適用できる「擬似クラス」という便利な仕組みがあります。
その中でも最近注目されているのが :has、:is、:where です。
これらを使うことで、これまでよりも柔軟で効率的なスタイリングが可能になります。

しかし、「どんなときに使うの？」や「どう書けばいいの？」といった疑問を持つ初心者の方も多いのではないでしょうか？
この記事では、これら3つの擬似クラスについて、初心者の方にもわかりやすく解説し、具体的な使用例を紹介します。

ゆうや

これを読めば、CSSがもっと楽しくなるはずです！
一緒に学んでいきましょう。

CSSの中では比較的新しい機能です。
一部の古いブラウザでは対応していない場合があります。
この後のセクションで、それぞれのブラウザ対応状況について詳しく解説しています。

:hasは、CSSの擬似クラスの1つで、「特定の子要素や条件を持つ親要素」に対してスタイルを適用するために使います。
簡単に言うと、「親要素が特定の子要素を含んでいるかどうかをチェック」することができます。

親要素にスタイルを適用
通常、CSSセレクタは「子要素をターゲット」にすることが多いですが、:hasを使うと「子要素の状態を基に親要素をスタイリング」できます。
条件を指定する柔軟性
子要素のクラスや属性、状態など、さまざまな条件を指定できます。

See the Pen :has by yuya o (@yuya-o) on CodePen.

:isは、CSSで複数のセレクタをまとめて簡潔に記述できる擬似クラスです。
これにより、同じスタイルを適用したい要素を効率よく指定できます。

See the Pen :is by yuya o (@yuya-o) on CodePen.

特異性の管理
:isの中に入るセレクタ自体は通常通り特異性を持つため、競合するスタイルに注意が必要です。

:whereは、:isと似た構文を持つ擬似クラスですが、特異性が常に0である点が特徴です。
これにより、スタイルの競合を避けつつ、優先順位を低くしてスタイルを適用できます。

以下のCSSを使うと、nav、aside、footerに同じスタイルを適用できます：

See the Pen :where by yuya o (@yuya-o) on CodePen.

ここで、:whereを使ったスタイルは特異性が0なので、後に記述されるスタイルや通常のセレクタで簡単に上書きできます。

:whereは、優先順位の低いスタイルを設定する際にとても役立つ擬似クラスです。特異性を気にせず柔軟にスタイルを適用できるため、効率的なCSS設計に貢献します。

特異性の意識
特異性が0であるため、具体的なセレクタやID指定によるスタイルが優先されます。
意図的に上書きされるべきスタイルを記述する場合に有効です。

擬似クラス	主な役割	特徴	使用例	特異性
`:has`	子要素の状態を基に親要素をスタイリング	「条件を持つ親要素」を指定可能	フォームのエラー検知	通常のセレクタと同じ
`:is`	複数のセレクタをまとめて簡潔に記述する	コードを短縮でき、特異性はそのまま	見出しの共通スタイル	指定したセレクタに依存
`:where`	複数セレクタをまとめつつ特異性を0にする	デフォルトスタイルの適用に便利	ベーススタイルの設定	常に0

:hasを使うと良い場面
特定の子要素や条件に応じて親要素を動的に変更する必要がある場合。
例: ナビゲーションメニューで現在のページリンクを持つ親項目を強調する。
:isを使うと良い場面
スタイルが共通する複数のセレクタをまとめて記述したい場合。
例: 複数の見出しタグに統一スタイルを適用する。
:whereを使うと良い場面
特異性を抑えたデフォルトスタイルやベーススタイルを設定したい場合。
例: 通常状態のフォーム要素に基本的なデザインを適用し、後から詳細を上書きできるようにする。