This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The :has() CSS pseudo-class represents an element if any of the selectors, relative to the :scope of the given element, passed as parameters, matches at least one element. The :has() pseudo-class takes a selector list as an argument. In the current specification :has is not marked as part of the dynamic selector profile, which means it can not be used within stylesheets; only with functions like document.querySelector().
/* Selects any <a>, as long as it has an <img> element directly inside it */
/* Note that this is not supported in any browser yet */
/* It also isn't intended to work in stylesheets */
var test = document.querySelector('a:has(> img)');
Syntax
:has(relative_selector_list)
Examples
The following selector matches only <a> elements that directly contain an <img> child:
a:has(> img)
Specifications
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4 The definition of ':has()' in that specification. |
Working Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | No support | No support | No support | No support | No support | No support |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | No support | No support | No support | No support | No support |