The :has()
CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope
of the given element) match at least one element.
/* 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)');
Syntax
: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
Description
The :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.
Examples
Matching <a> elements that directly contain an <img>
The following selector matches only <a>
elements that directly contain an <img>
child:
a:has(> img)
Matching <h1> elements that are followed by a <p>
The following selector matches <h1>
elements only if they have a <p>
element directly following them:
h1:has(+ p)
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of ':has()' in that specification. | Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:has()
|
Chrome No support No No support No Notes' See bug 669058 |
Edge No support No No support No Notes' See bug 669058 |
Firefox No support No No support No Notes' See bug 418039 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android No support No No support No Notes' See bug 418039 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- No support
- No support
- See implementation notes.'
- See implementation notes.
See also
:has() by Mozilla Contributors is licensed under CC-BY-SA 2.5.