Maison > interface Web > tutoriel CSS > Comment puis-je sélectionner le nième élément sans connaître son parent ?

Comment puis-je sélectionner le nième élément sans connaître son parent ?

Mary-Kate Olsen
Libérer: 2024-12-15 09:19:14
original
252 Les gens l'ont consulté

How Can I Select the Nth Element Without Knowing Its Parent?

Sélection d'un nième enfant sans connaissance de l'élément parent

Lorsque vous travaillez avec du code dynamique, il peut être difficile de sélectionner un nième élément lorsque l'élément parent est inconnu. Cependant, cela peut être réalisé en utilisant des sélecteurs CSS comme :first-child et :nth-child().

:first-child et :nth-child()

Ces sélecteurs vous permettent de sélectionner des éléments en fonction de leur position au sein de leur élément parent. Par exemple, :first-child sélectionne le premier élément enfant, tandis que :nth-child(2) sélectionne le deuxième élément enfant.

Pourquoi :first, :last, :nth n'existent pas

Contrairement à :first-child et :nth-child(), les sélecteurs comme :first, :last et :nth n'existent pas car il n'y a pas de distinction entre un élément et le premier, dernier ou nième élément du document entier. Chaque élément est l'enfant d'un autre élément, à l'exception de l'élément racine.

Exemple

Pour sélectionner le deuxième paragraphe dans l'exemple suivant, utilisez le sélecteur suivant :

<youdontknowwhat!>
  <p class="select-me">One</p>
  <p class="select-me">Two</p>
</youdontknowwhat!>
Copier après la connexion
.select-me:nth-child(2)
Copier après la connexion

Ce sélecteur sélectionnera le deuxième élément .select-me quel que soit son élément parent.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal