Le sélecteur :has() vous aide à sélectionner des éléments qui contiennent des éléments qui correspondent au sélecteur que vous avez passé dans la fonction :has().


Il peut être décrit simplement comme un sélecteur "parent", mais il est en fait bien plus que ça.


Par exemple, vous pouvez sélectionner toutes les <div>, mais uniquement quand elles contiennent un <p>.


div:has(p) {
  background: red;
}


Maintenant, quand une <div> contient un <p>, sa couleur de fond est rouge. Les autres <div> restent inchangées.


C'est un changement majeur en CSS, car il n'y avait aucun moyen de remonter l'arbre avant le sélecteur :has(). Cela avait peut-être de bonnes raisons, comme expliqué expliqué dans ce post, essentiellement pour des problématiques de performances.


Attention cependant, cette fonctionnalité n'est uniquement supportée par les navigateurs Safari et Chrome pour l'instant.