:has() Relational Pseudo-class
Select parent elements based on their children using the powerful :has() relational pseudo-class.
What is :has()?
The :has() pseudo-class selects an element if it contains a descendant matching the argument. Often called the "parent selector," it enables styling a parent element based on its children — a capability CSS never had before.
Basic Syntax
.card:has(img) selects any .card element that contains an img descendant. The argument is a relative selector list — any valid CSS selector describing elements relative to the subject element.
All lessons in this course
- Native CSS Nesting
- :has() Relational Pseudo-class
- @scope for Scoped Styles
- View Transitions API