: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.

Syntax

:has( <forgiving-relative-selector-list> )

Description

The :has() pseudo-class takes a relative selector list as an argument.

Examples

Matching <a> elements that directly contain an <img>

The following selector matches only <a> elements that directly contain an <img> child:

a:has(> img)

Matching <h1> elements that are followed by a <p>

The following selector matches <h1> elements only if they have a <p> element directly following them:

h1:has(+ p)

Specifications

Specification
Unknown specification
# relational

Browser compatibility

BCD tables only load in the browser

See also