CSS擬似クラス :has() を使った実践的なデザインテクニック

はじめに

CSS Selectors Level 4 で追加された :has() 擬似クラスは「親セレクタ」を実現できる画期的な機能です。従来は JavaScript でしか実現できなかった「ある要素を含む場合に親要素を装飾する」といった処理が、CSS だけで可能になりました。

基本構文

.card:has(img) {
  border: 2px solid #2C7BE5;
}

上記の例では、.card 内に img 要素がある場合のみ枠線を表示します。

よくある利用シーン

1. フォームバリデーションの改善

.form-group:has(input:invalid) {
  background: #ffe5e5;
}

不正な入力がある場合だけ背景色を変更できます。

2. ナビゲーションの強調

.nav-item:has(a.active) {
  font-weight: bold;
}

現在のページに対応するメニュー項目を強調表示できます。

3. レイアウト調整

.article:has(h2 + p) {
  margin-top: 2rem;
}

特定の見出しと段落の組み合わせがあるときだけ余白を調整できます。

注意点

• 一部の古いブラウザでは未対応（特に Safari の古いバージョン）
• 高度なネストで利用するとパフォーマンスに影響が出る可能性あり

まとめ

:has() 擬似クラスは、CSS だけで「親子関係を考慮したスタイル制御」を可能にし、フロントエンド開発を効率化します。JavaScript 依存を減らし、よりクリーンなコードを実現できるでしょう。今後の実務でも活用シーンはますます広がっていきます。