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 <h1> 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No No No1 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No No No1 No No No

1. See bug 418039

Document Tags and Contributors

Last updated by: jacobbearden,