:has()

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

Browser compatibility