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() の定義 |
草案 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。