:has()関係擬似クラス

:has()疑似クラスは、引数に一致する子孫要素を含む要素を選択します。「親セレクター」と呼ばれることも多く、子要素に基づいて親要素をスタイリングできます。これは、これまでCSSにはなかった機能です。

.card:has(img)は、imgの子孫要素を含むすべての.card要素を選択します。引数は相対セレクターリストであり、対象要素を基準にした要素を表す有効なCSSセレクターを記述します。

無効な入力欄を含むフォームコンテナをスタイリングできます：form:has(:invalid) { border-color: red; }。見出しを含むセクションもスタイリングできます：section:has(h2) { padding-top: 2rem; }。子要素の状態に応じて、親要素の見た目を変更できます。

:has()を使うと、+や~ではできない先行する兄弟要素の選択も可能です。h2:has(+ p)は、直後にpが続くh2要素を選択します。li:has(~ .active)は、後続する兄弟要素に.activeを持つli要素を選択します。

JavaScriptを使わずに、ネイティブのフォームの有効性に応じてスタイルを変更できます。input:has(~ .error-msg)は、兄弟要素としてエラーメッセージを持つ入力欄をスタイリングします。label:has(+ input:required)は、対応する入力欄が必須であるラベルをスタイリングします。すべてCSSだけで実現できます。

アクティブな子要素に基づいてナビゲーションコンテナを強調表示できます。nav:has(.active)は、子要素のいずれかがactiveクラスを持つとき、nav全体にスタイルを適用します。コンテナのレベルで、現在のナビゲーションセクションを示すのに便利です。

.grid:has(.card:focus-within)は、いずれかのカードがキーボードフォーカスを受け取ったとき、グリッド全体をスタイリングします。.dropdown:has(:hover)は、子孫要素のいずれかにホバーしている間、ドロップダウンを開いたままにします。複雑な兄弟コンビネータの連鎖よりもすっきりと記述できます。

.sidebar:has(nav)は、.sidebar:not(:has(nav))とは異なるレイアウトを適用します。JavaScriptを使わずに条件付きレイアウトを実現できます。特定の子要素の有無によって親要素のレイアウトが決まり、真に適応的でコンテンツを認識するCSSが可能になります。

広範な引数セレクター（例：:has(*)）を使った:has()は、ブラウザがすべての要素を確認する必要があるため、処理コストが高くなることがあります。:has()の引数は具体的にしてください。可能な場合は、:has(.specific-child)（任意の子孫要素）よりも:has(> .specific-child)（直接の子要素）を優先します。

:has()は、Chrome 105以降、Safari 15.4以降、Firefox 121以降でサポートされています。2023年後半から完全なBaseline対応になっています。ポリフィルは存在しません（JavaScriptによるシミュレーションが必要になるためです）。古いブラウザでは機能が必須でない場合に、Progressive Enhancementとして使用してください。

以前はJSのイベントリスナーが必要だった「子要素にフォーカスがあるときに親要素へクラスを追加する」「modal-triggerが存在するときにオーバーレイを表示する」「項目がちょうど3つあるときにグリッドのスタイルを変更する」といったパターンを、:has()で扱えます。これらをすべて宣言的に記述できます。

:has()は、+や~のような既存のCSSコンビネータと比べて、何が特徴的ですか？

:has()は、CSSで初めての真の関係性疑似クラスであり、親要素や先行する兄弟要素を選択できます。コンテンツ主導のスタイリング、フォーム状態への反応、ナビゲーションの強調表示などを実現し、これまでJavaScriptによるDOM操作が必要だった多くのパターンを、CSSだけで宣言的に記述できます。