:has()
The :has() relational pseudo-class matches an element that contains, or relates to, elements matching the inner selector.
Syntax
parent:has(selector) { }Examples
.card:has(img) { padding-top: 0; }
label:has(+ input:invalid) { color: crimson; }
.form:has(:focus-visible) { outline: 1px dashed; }
Output
Removes top padding from cards that contain an image, reddens labels preceding invalid inputs, and outlines a form when any child is keyboard-focused.
Notes
The long-awaited "parent selector". It can look at descendants, following siblings (via combinators), and state. Baseline since 2023. Its specificity is that of its most specific argument; it is not itself counted.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 105 |
| firefox | 121 |
| safari | 15.4 |
| edge | 105 |