CSS has() セレクターで実現する新しいデザインパターン

2023年、CSSの世界に革命をもたらす新機能 :has() セレクター が、ついに主要なブラウザすべてでサポートされました。特に、Firefox 121の対応によってWeb開発者が自由にこの強力なセレクターを活用できるようになりました。

:has() セレクターは「親要素が特定の子要素を持つ場合にスタイルを適用できる」という画期的な機能を提供し、これまでJavaScriptなしでは実現できなかったスタイル調整が可能になります。本記事では、基本的な使い方から実践的なデザインパターン、パフォーマンスの考慮点まで詳しく解説します。

1. はじめに

1-1. CSS :has() セレクターとは？

:has() セレクターは 「関係疑似クラス（Relational Pseudo-class）」 と呼ばれる新しいタイプのCSSセレクターで、親要素が特定の子要素を持つかどうかを条件にしてスタイルを適用できます。

これまでは、CSSだけで「親要素が特定の子要素を持っているか」を判定することはできず、JavaScriptを使う必要がありました。しかし、:has() の登場により、CSSのみで柔軟なデザインが可能になります。

1-2. :has() セレクターのブラウザ対応状況

2023年12月の Firefox 121のリリース により、主要なモダンブラウザすべてが :has() をサポートしました。

ブラウザ	バージョン	リリース日
Chrome	105	2022年9月
Edge	105	2022年9月
Safari	15.4	2022年3月
Firefox	121	2023年12月

これにより、最新のブラウザ環境で :has() を問題なく使用できるようになっています。

2. :has() セレクターの基本的な使い方

2-1. :has() の基本構文

:has() の基本的な記述方法は以下のとおりです。

.container:has(.child) {
  background-color: lightblue;
}

上記のコードでは、.container クラスを持つ要素が .child を子要素として含む場合、背景色が lightblue になります。

2-2. 従来の方法との比較

:has() を使用しない場合、親要素のスタイルを変更するにはJavaScriptが必要でした。

従来の方法（JavaScript）

document.querySelectorAll('.container').forEach(container => {
  if (container.querySelector('.child')) {
    container.style.backgroundColor = 'lightblue';
  }
});

新しい方法（CSS :has()）

.container:has(.child) {
  background-color: lightblue;
}

:has() を使うことで、JavaScriptを使わずにCSSだけで同じことが実現できます。

3. :has() を活用した高度なデザインパターン

3-1. インタラクティブなUIコンポーネント

:has() を活用することで、チェックボックスの状態に応じて親要素のスタイルを変えることが可能です。

.card:has(input:checked) {
  border: 2px solid green;
}

実際のコード

<label class="card">
  <input type="checkbox">
  チェックすると枠が変わる
</label>

3-2. フォームの動的スタイリング

特定のフィールドが入力された場合に、フォームの背景色を変えることができます。

form:has(input:valid) {
  background-color: #e0ffe0;
}

3-3. レスポンシブデザインへの応用

特定の子要素がある場合のみ、レイアウトを変更できます。

.container:has(.sidebar) {
  display: flex;
}

4. パフォーマンスとベストプラクティス

4-1. :has() を使用する際のパフォーマンス考慮

:has() は強力ですが、使用には注意が必要です。

⚠️ 非推奨な使い方

*:has(div) { 
  color: red;
}

上記のように *（全要素）を対象にすると、パフォーマンスが低下する可能性があります。

✅ 推奨される使い方

.card:has(.image) {
  border: 1px solid #ccc;
}

特定のクラスや要素に絞ることで、処理の負荷を抑えられます。

4-2. 効率的なセレクターの記述方法

深すぎるセレクターは避ける
頻繁に更新される要素には使用しない
CSSのキャッシュを活用する

5. 実際のプロジェクトへの導入事例

5-1. :has() を活用したWebサイトの事例

事例①: フォームの動的ハイライト

form:has(.error) {
  border: 2px solid red;
}

事例②: ナビゲーションメニューの強調

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

5-2. 導入時の課題と解決策

課題	解決策
古いブラウザでの非対応	`@supports` を使用する
パフォーマンスの低下	セレクターの範囲を限定する
他のCSSルールとの競合	優先度を意識して記述