0Pricing
CSS Academy · Lesson

: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

  1. Native CSS Nesting
  2. :has() Relational Pseudo-class
  3. @scope for Scoped Styles
  4. View Transitions API
← Back to CSS Academy