🔍
:has()セレクタ
子条件で親/兄弟を選択
CSSでは長い間親セレクタが不可能でした。:has()の登場により、子要素の存在や状態に基づいて親要素をスタイリングできるようになりました。これはJavaScriptなしでも複雑な状態ベースのUIを実装できることを意味します。
例えばform:has(input:invalid)で無効な入力があるフォーム全体をハイライトしたり、.card:has(img)で画像があるカードだけ異なるレイアウトを適用できます。
適用方法
1
親:has(子条件)の形式でセレクタを記述する
2
:has()内に他の擬似クラス（:checked, :focus, :invalidなど）を組み合わせる
3
兄弟結合子（+または~）と組み合わせて兄弟ベースの選択も実装する
4
JavaScriptで実装していた状態ベースのスタイリングを:has()で置き換える
メリット
- ✓ JavaScriptなしで状態ベースのスタイリングが可能になる
- ✓ CSSだけで複雑な条件付きデザインが実装できる
デメリット
- ✗ 複雑な:has()セレクタはパフォーマンスに影響しうる
- ✗ セレクタが長くなると可読性が低下しうる
ユースケース
チェックボックスの状態に応じてカードスタイルを変更するインタラクティブUI
必須入力フィールドが空の時にフォーム全体をハイライト表示