The :has() Selector: Bringing Real Logic to CSS

Source: Dev.to

“If” logic in CSS — yes, it’s real.

We’ve all said:

“CSS can’t do logic.”

Turns out… that’s not true.

With :has(), CSS can behave like an if condition — letting you style an element based on what it contains or what’s happening inside it.

/* If a card has an image, add a border */
.card:has(img) {
  border: 2px solid #4f46e5;
}

In simple terms: if a .card contains an img, then apply the style.

Why this matters

• Less JavaScript to manage UI state
• More reactive, intelligent layouts
• Cleaner, simpler component logic