Relational :has(rs1, rs2)

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

Browser Support

Chrome Firefox Safari Opera IE Edge
Desktop no no no no no no
Mobile no no no no no no

Syntax

E:has(rs1, rs2, ...) {
/* Where rs1 and rs2 are two different relative selectors. */
}

Example

/* The following selector matches all p elements immediately followed by an img element. */

p:has(+img) {
color: red;
}

/* The following selector matches all section elements which contain h1, h2, and/or h3 elements. */

section:has(h1, h2, h3) {
background-color: green;
}

/* The following selector matches anything containing a span element with a class urgent. */

:has(span.urgent) {
background-color: red;
}

Information is based on Selectors Level 4 - W3C Editor's Draft (last updated on May 24, 2016)
Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.