MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

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

Document Tags and Contributors

 Contributors to this page: mfluehr, stevenwdv, chrisdavidmills, teoli, alnorris
 Last updated by: mfluehr,