:has()

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

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

構文

Error: could not find syntax for this item

解説

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

<a> 要素のうち直接 <img> を含んでいるものを選択

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

a:has(> img)

<h1> 要素のうち直後に <p> があるものを選択

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

h1:has(+ p)

仕様書

Specification
Unknown specification
# relational

ブラウザーの互換性

BCD tables only load in the browser

関連情報