# CSS :has() is now widely supported and is a game-changer

**Date:** 2025-12-04  
**Tags:** CSS, WebDev, Frontend  
**URL:** https://kelexine.is-a.dev/til/css-has-selector

---

TIL: CSS :has() is now widely supported and is a game-changer. Style parent elements based on their children! No more JavaScript for 'if card has image, add padding'. Just pure CSS parent selection.


```css
/* Style card differently if it has an image */
.card:has(img) {
  padding: 0;
}

/* Style form when input is focused */
form:has(input:focus) {
  border-color: blue;
}
```



**Related:** [https://developer.mozilla.org/en-US/docs/Web/CSS/:has](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)


---

*This content is available at [kelexine.is-a.dev/til/css-has-selector](https://kelexine.is-a.dev/til/css-has-selector)*