This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 |