/* Selects any <a>, as long as it has an <img> element directly inside it */ /* Note that this is not supported in any browser yet */ let test = document.querySelector('a:has(> img)');
:has( <relative-selector-list> )
<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> ')'
<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>? ']'
:has() pseudo-class takes a relative selector list as an argument. In earlier revisions of the CSS Selectors Level 4 specification,
:has had a limitation that it couldn't be used within stylesheets. Instead, it could only be used with functions like
document.querySelector(); this was due to performance concerns. This limitation has been removed because no browser implemented it that way. Instead, browsers currently only support the use of
:has() within stylesheets.
|Selectors Level 4
The definition of ':has()' in that specification.
|Working Draft||Initial definition|
BCD tables only load in the browser