Comment sélectionner un élément enfant arbitraire sans connaître son parent ?

Sélection d'un élément enfant arbitraire sans connaître le parent

Lorsqu'il s'agit de code dynamique, il est courant de rencontrer des scénarios où l'élément parent d'un l’enfant cible est inconnu. Cela pose un défi lorsque l'on tente de sélectionner des éléments spécifiques à l'aide de sélecteurs d'enfants.

Les sélecteurs du nième enfant à la rescousse

Heureusement, le sélecteur du nième enfant fournit une solution à ce problème. Contrairement au premier enfant et au dernier enfant, nth-child() peut être utilisé sans spécifier l'élément parent. Il sélectionne simplement le n-ème enfant dans le contexte actuel, quelle que soit l'identité du parent.

Exemple :

Considérez la structure HTML suivante :

<youdontknowwhat!>
   <p class="select-me">One</p>
   <p class="select-me">Two</p>
</youdontknowwhat!>

Pour sélectionner le deuxième paragraphe, vous pouvez utiliser le sélecteur suivant :

.select-me:nth-child(2)

Pourquoi aucun :premier, :dernier ou :ntième sélecteur ?

Comme mentionné par BoltClock, chaque élément HTML à l'exception de la racine () est l'enfant d'un autre élément. Utiliser des sélecteurs comme :first serait ambigu car il pourrait faire référence soit au premier enfant de l'élément actuel, soit au premier enfant du parent de l'élément actuel. Cette ambiguïté est évitée en utilisant :first-child, :last-child et :nth-child(), qui spécifient clairement la portée de la sélection.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!