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 passed as parameters (relative to the :scope of the given element), match 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 snapshot 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)
The following selector matches <h2> elements only if they have a <p> element directly following them:
h1:has(+ p)
Specifications
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4 The 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.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | No | No | No1 | No | No | No |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | No | No | No | No1 | No | No | No |
1. See bug 418039