Sélecteur enfant et sélecteur descendant dans les structures de table

Lors de la sélection d'éléments dans des documents HTML, les développeurs utilisent souvent des sélecteurs enfants (>) pour cibler ordonner aux sélecteurs enfants et descendants de cibler tout élément imbriqué. Cependant, il existe des scénarios dans lesquels le sélecteur d'enfant semble échouer de manière inattendue.

Considérez l'exemple suivant :

table tr td {
  background-color: red;
}

table > tr > td {
  background-color: blue;
}

La première règle sélectionne avec succès tous les éléments

dans les éléments dans les éléments . Cependant, la deuxième règle, qui utilise le sélecteur d'enfant (>), ne parvient à styliser aucun élément , qui à son tour est un enfant de

. Intrigués par ce comportement, les développeurs pourraient supposer que puisque	est un enfant de

, le sélecteur d'enfant doit s'appliquer.

La confusion vient de l'inclusion implicite d'un élément

dans HTML. Par défaut, les navigateurs insèrent un élément pour contenir les éléments . En conséquence, la structure réelle de l'élément devient :

Dans cette structure modifiée,

n'est plus un enfant direct de , mais plutôt un enfant de , qui lui-même est un enfant de . Par conséquent, le sélecteur > ne peut pas cibler .

Pour corriger ce problème, les développeurs doivent sélectionner explicitement l'élément tbody :

table > tbody > tr > td {
  background-color: blue;
}

Cela garantit que le sélecteur enfant cible le bon élément dans la structure modifiée. De plus, si un élément tbody est explicitement ajouté au document HTML, le même sélecteur peut être utilisé.

puisqu'il ne s'agit pas d'un enfant immédiat de