CSS :has

Desde que os desenvolvedores escreveram o código CSS, estamos desesperados para ter um método que permita estilizar um elemento pai com base nas características do filho. Isso não era possível até agora. O CSS introduziu a função :has que permite estilizar um pai com base em um seletor CSS relativo!

Vamos dar uma olhada em alguns casos de uso de :has em CSS:

/*
  If an `a` element contains an image, set the `a`'s display
*/
a:has(img) {
  display: block;
}

/*
  If a `figure` has a `caption` with a `multiline` class
  allow the `figure` to have any height
*/
figure {
  height: 200px;
}
figure:has(caption.multiline) {
  height: auto;
}

/*
  Hide an advert containing `div` until ads load
  and have been injected
*/
.ad-container {
  display: none;
}
.ad-container:has(.ad) {
  display: block;
}

/*
  If we have an `article` element without a heading,
  add top padding because `H1`s have top padding
*/
article:not(:has(h1)) {
  padding-top: 20px;
}

O Safari da Apple é o primeiro navegador a suportar :has embora devamos ver outros seguirem o exemplo rapidamente, pois faz parte do especificação oficial do CSS. Agora que temos essa nova pseudoclasse, o senhor acha que vai usá-la muito? Ou o senhor vai continuar com suas soluções alternativas atuais?