Skip to content
techsnow
All blogs

The CSS :has() selector changes how you write styles

“A parent selector in plain CSS. Style a card when it contains an image, or a form when an input is invalid.”
Attaullah

Instructor, TechSnow

4 Sept 2026 · 1 min read · Web development

For years we wanted to style a parent based on its children. Now every major browser supports it.

Style a card that has an image

.card:has(img) {
  padding: 0;
}

Highlight a form with an invalid field

form:has(input:invalid) button {
  opacity: 0.5;
}
Keep :has() selectors simple. Very broad ones like body:has(...) can make big pages slower.

Written by

Attaullah

Instructor, TechSnow

Teaches web development, Python and programming fundamentals at TechSnow, with clear lessons in English and Urdu / Hindi and a real project in every course.

3 comments

Be kind. Comments with links are reviewed before they appear.

  • Hamza K. 2 days ago

    Really clear explanation. The example made it click for me.

    • TechSnow teamAuthor2 days ago

      Glad it helped, Hamza! Try changing the example and see what breaks.

  • Mehwish 4 days ago

    Could you write a follow-up with a bigger project?

More blogs