これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS の :has() 疑似クラスは、引数として渡されたセレクターに (指定された要素の :scope の相対で) 該当する要素が一つ以上の要素に一致することを表します。

:has() 疑似クラスは、セレクターのリストを引数に取ります。現在の仕様書では、 live selector profile の一部として示されておらず、すなわちスタイルシートの中で使用できません。 document.querySelector() のような関数の中でのみ使用できます。

/* <img> 要素を直接中に含む <a> を選択する */
/* なお、これはまだブラウザーが対応しておらず、 */
/* スタイルシート内で動作することも意図していません */
var test = document.querySelector('a:has(> img)');

構文

:has(relative_selector_list)

次のセレクターは、 <img> を直接子に持つ <a> 要素のみに一致します。

a:has(> img)

次のセレクターは、直後に <p> 要素を持つ <h1> 要素のみに一致します。

h1:has(+ p)

仕様書

仕様書 状態 備考
Selectors Level 4
:has() の定義
草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし なし なし1 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし なし なし なし1 なし なし なし

1. See bug 418039

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,