:has()

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

/* <img> 要素を直接中に含む <a> を選択する */
/* なお、これはまだブラウザーが対応していません */
let test = document.querySelector('a:has(> img)');

構文

:has( <forgiving-relative-selector-list> )

:has() 擬似クラスは、セレクターの相対的なリストを引数に取ります。 CSS Selectors Level 4 仕様書よりも前の版では、 :has はスタイルシート内で使用することができず、 document.querySelector() のような関数でのみ利用することができるという制限がありました (性能上の問題です)。そのように実装するブラウザーはなかったので、この制限は撤廃されました。すなわち、ブラウザーは現在、 :has() のスタイルシートでの使用に対応しています。