CSS :has() Pseudo-Class

Select parent elements based on child conditions ("the parent selector").

❮ Previous Next ❯

The :has() relational pseudo-class matches an element if any of the selectors passed as arguments match at least one child element. For example, figure:has(figcaption) targets figures containing a caption.

Key Takeaways: CSS :has() Pseudo-Class

Mastering CSS :has() Pseudo-Class helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS :has() Pseudo-Class Code Example

CSS

/* Target a form card only when an invalid input exists inside it */
.form-card:has(input:invalid) {
  border-color: #ef4444;
}

Output

Highlights parent card border in red when any child input is invalid

Free sign-in required · Google login available

Finished this lesson?

Mark it complete to track your progress.

❮ Previous

CSS Clip Path and Masking

Next ❯

CSS Print Media Queries

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS :has() Pseudo-Class

💡 Key Takeaways: CSS :has() Pseudo-Class

CSS :has() Pseudo-Class Code Example

Key Takeaways: CSS :has() Pseudo-Class