#Explications
#:nth-child of
Imaginons un panier de fruits avec plusieurs fruits (éléments) et que nous voulons styliser différemment certains d'entre eux en fonction de leur position parmi les fruits d'un certain type.
.panier_de_fruits > .fruit:nth-child(2 of .banane) {
background: white;
}
Parmi les éléments .fruit qui sont des enfants directs de .panier_de_fruits, on sélectionne parmis les .banane, celle qui est à la deuxième position (2 of .banane) et on lui donne un fond blanc.
#:has
La pseudo-classe :has permet de sélectionner un élément parent en fonction de la présence d'un sélecteur spécifique parmi ses descendants.
.panier_de_fruits:has(.pasteque) {
border: 4px solid white;
}
