目次 [ close ]
  1. はじめに
  2. :hasとは？
    1. 特徴
    2. 主な用途
  3. :isとは？
    1. 特徴
    2. 主な用途
  4. :whereとは？
    1. 特徴
    2. 主な用途
  5. :has, :is, :whereの違いと使い分け
    1. 違いの比較表
    2. 使い分けの基準
  6. ブラウザ対応状況
    1. 1. :has
    2. 2. :is
    3. 3. :where
    4. ブラウザ対応の確認方法
  7. さいごに

はじめに

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

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

ゆうや

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

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

:hasとは？

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

特徴

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

主な用途

  • フォームのバリデーション
    エラーを含むフォームフィールドの親要素にスタイルを付ける。
  • ナビゲーションメニューの動的スタイル
    アクティブなリンクを持つメニュー項目を強調表示する。

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

関連記事
:has() - CSS: カスケーディングスタイルシート | MDN
:has() – CSS: カスケーディングスタイルシート | MDN
MDN Web Docs

:isとは？

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

特徴

  • セレクタを短縮できる
    複数の要素に同じスタイルを適用したいとき、:isを使うことでコードの冗長さを防ぐことができます。
  • 特異性の軽減
    通常のセレクタの記述に比べて特異性が増加しないため、意図しないスタイルの競合を防ぎやすくなります。

主な用途

  • 見出しの統一スタイル
    複数の見出し要素に共通のスタイルを適用。
  • 特定のタググループへのスタイル適用
    例えば、フォーム要素に同じスタイルをまとめて適用。

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

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

関連記事
:is() - CSS: カスケーディングスタイルシート | MDN
:is() – CSS: カスケーディングスタイルシート | MDN
MDN Web Docs

:whereとは？

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

特徴

  • 特異性が0
    他のスタイルよりも優先順位を下げて適用することができます。
    デフォルトのスタイルやフォールバック用のスタイルを設定する際に便利です。
  • 柔軟なセレクタ指定
    :isと同じく、複数のセレクタを一度に指定可能です。

主な用途

  • デフォルトスタイルの設定
    汎用的な要素に基本スタイルを適用し、必要に応じて上書きするためのベースを作ります。
  • エラー回避やメンテナンス性の向上
    複数の要素をまとめてスタイリングする際、特異性を抑えることで後からの調整がしやすくなります。

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

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

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

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

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

関連記事
:where() - CSS: カスケーディングスタイルシート | MDN
:where() – CSS: カスケーディングスタイルシート | MDN
MDN Web Docs

:has, :is, :whereの違いと使い分け

違いの比較表

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

使い分けの基準

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

ブラウザ対応状況

:has、:is、:whereはCSSの新しい機能であるため、ブラウザによる対応状況を確認することが重要です。
以下に各擬似クラスの主要な対応状況をまとめます

1. :has

:hasは比較的新しい擬似クラスで、以下のブラウザで対応しています：

  • 対応ブラウザ:
    • Chrome 105以降
    • Edge 105以降
    • Safari 15.4以降
  • 非対応ブラウザ:
    • 一部の古いブラウザ（例: Internet Explorer）

注意: モダンブラウザを使用していないユーザーがいる場合、フォールバック対応を考える必要があります。

2. :is

:isは:hasよりも広くサポートされています。

  • 対応ブラウザ:
    • Chrome 88以降
    • Edge 88以降
    • Firefox 78以降
    • Safari 14以降

比較的安全に使用できますが、古いブラウザ環境で確認したい場合があります。

3. :where

:whereも:isと同程度のサポートがあります。

  • 対応ブラウザ:
    • Chrome 88以降
    • Edge 88以降
    • Firefox 78以降
    • Safari 14以降

ブラウザ対応の確認方法

ブラウザ対応状況は、最新情報を確認するためにCan I useを活用することをおすすめします。これにより、使用する機能がターゲットとするユーザー環境で問題なく動作するかどうかを簡単に調べることができます。

さいごに

:has、:is、:whereは、それぞれ異なる場面で便利な擬似クラスです。
これらを使いこなせるようになると、CSSの記述がより柔軟で効率的になり、より直感的にデザインを調整できるようになります。

初心者のうちは「どれをどこで使えばいいの？」と迷うこともあるかもしれませんが、この記事で紹介した基本的な使い方や例を参考に、少しずつ自分のプロジェクトで試してみてください。

最後に、モダンブラウザでの対応が進んでいるとはいえ、古い環境での互換性にも注意を払うことをお忘れなく。
適切にフォールバックを用意することで、幅広いユーザーに対応したウェブサイトを作ることができます。

CSSの新しい機能を学びながら、デザインの幅を広げていきましょう！
ぜひ、この記事で得た知識を実践で活用してみてくださいね。