Styling Parents with :has()

:has() quietly removed a whole category of JavaScript I used to write: "add a class to the parent when the child is in state X". My favorite production use so far — highlight a form field's wrapper only when its input is invalid and the user has touched it:

.field:has(input:user-invalid) {
  border-color: var(--destructive);
}

Second favorite: a card that changes layout only when it actually contains an image, no hasImage prop threading:

.card:has(img) {
  grid-template-columns: 8rem 1fr;
}

Browser support has been universal since late 2023. The old rule of "CSS can't select upwards" is dead — update your mental model and delete the JS.