T
css selectors has is-where design

高度な CSS セレクター：:has()、:is()、:where()、および詳細度のマスター

高度なセレクターで CSS のロジックを解き放つ。:has() 親セレクター、:is()、:where()、およびモダンな詳細度管理の徹底解説。

2026-04-12

高度な CSS セレクター：:has()、:is()、:where()、および詳細度のマスター

CSS はもはや単なるスタイルの集まりではありません。モダンなセレクターを使用することで、JavaScript を 1 行も書くことなく、要素間に複雑でレスポンシブな関係を構築できる強力なロジックエンジンへと進化しました。

このガイドでは、CSS セレクターの「スーパーパワー」と、それらがカスケードに対する私たちの考え方をどのように変えているかを探ります。

2. :is() と :where() でクリーンな CSS を

これらの「ロジック」セレクターを使用すると、複数のセレクターをグループ化でき、コードが大幅にクリーンで読みやすくなります。

:is() 疑似クラス

複数のセレクターをグループ化し、引数の中で最も高い詳細度を採用します。

/* 以前 */
header h1, header h2, header h3 { margin-bottom: 20px; }

/* 以降 */
header :is(h1, h2, h3) { margin-bottom: 20px; }

:where() 疑似クラス

:is() と似ていますが、これは常に詳細度が 0 になります。これは、後で簡単に上書きしたいベースラインスタイル（リセットレイヤーやベースレイヤーなど）に最適です。

3. 高度な :nth-child() によるターゲットを絞ったスタイリング

:nth-child() セレクターは大幅なアップグレードを受けました。現在は "of S" 構文を使用して、特定のサブセット内での位置に基づいて要素を選択できます。

/* フィルタリングされたリスト内で 2 番目に表示されているアイテムを選択 */
li:nth-child(2 of .visible) {
  background-color: yellow;
}

これは、一部のアイテムが display: none で非表示になっている可能性がある動的なリストで非常に便利です。

4. 詳細度 (Specificity) のマスター

CSS における最大の悩みの種の 1 つは、別のセレクターの方が「強力」であるためにスタイルが適用されないという「詳細度の争い」です。

詳細度の計算式：

  1. インラインスタイル：（例：style="..."） - 最高優先順位。
  2. ID：#my-element（スコア：1, 0, 0）。
  3. クラス、属性、疑似クラス：.my-class、[type="text"]、:hover（スコア：0, 1, 0）。
  4. 要素および疑似要素：div、h1、::before（スコア：0, 0, 1）。

モダンなヒント：プロジェクト全体の詳細度を管理するには、@layer（カスケードレイヤー）を使用してください。

5. 詳細度の可視化

なぜスタイルが適用されないのか不明な場合は、詳細度計算機を使用することをお勧めします。このツールはセレクターを分解して数値スコアを算出し、競合を即座に特定するのに役立ちます。

高度なセレクターのまとめ

セレクター 最適な用途 詳細度 サポート状況
:has() 子/状態に基づいたスタイリング 通常 広くサポート
:is() グループ化、クリーンなコード 引数の最高値 広くサポート
:where() 詳細度 0 のベーススタイル 常に 0 広くサポート
:nth-child 動的リストのスタイリング 通常 広くサポート

結論

モダン CSS セレクターは、ネイティブ CSS のパフォーマンスを維持しながら、プログラミング言語のような「ロジック」を提供します。:has() をマスターし、詳細度を理解することで、より堅牢でバグの少ない UI の関係性を構築できます。

セレクターをテストしてみたいですか？当サイトの CSS セレクターテスター をチェックしてください。近日公開予定の CSS 詳細度計算機 もお楽しみに！

ブログに戻る