:has()

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

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

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

構文

:has( <relative-selector-list> )
where 
<relative-selector-list> = <relative-selector>#
where 
<relative-selector> = <combinator>? <complex-selector>
where 
<combinator> = '>' | '+' | '~' | [ '||' ]
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
where 
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
where 
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
where 
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]?  | 
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
where 
<attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

例

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

a:has(> img)

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

h1:has(+ p)

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。