: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()
のスタイルシートでの使用に対応しています。
例
<a> 要素のうち直接 <img> を含んでいるものを選択
<h1> 要素のうち直後に <p> があるものを選択
仕様書
Specification |
---|
Selectors Level 4 # relational |
ブラウザーの互換性
BCD tables only load in the browser