En quoi les sélecteurs « nth-child » et « nth-of-type » diffèrent-ils dans la sélection d'éléments HTML spécifiques ?

Sélection d'éléments spécifiques avec un nième enfant ou un nième de type

En HTML, il existe des situations où vous devez sélectionner un élément spécifique dans une liste basée sur son nom de classe, quelle que soit sa position dans le balisage. Pour y parvenir, CSS fournit deux sélecteurs essentiels : nth-child et nth-of-type.

Utiliser nth-child

nth-child permet de sélectionner un élément en fonction de sa position relative à ses frères et sœurs. Par exemple, div.myclass:nth-child(1) sélectionnerait le premier élément avec la classe myclass dans son conteneur parent.

Exemple :

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- omitted code -->
    <div class="myclass">my text2</div>
    <!-- omitted code -->
    <div class="myclass">my text3</div>
    <!-- omitted code -->
</div></code>

<code class="css">.parent_class:nth-child(1) { /* first .myclass within .parent_class */ }
.parent_class:nth-child(2) { /* second .myclass within .parent_class */ }
.parent_class:nth-child(3) { /* third .myclass within .parent_class */ }</code>

Utiliser nth-of-type

nth-of-type est similaire à nth-child, mais il sélectionne un élément en fonction de sa position par rapport à d'autres éléments avec le même nom de balise. Dans ce cas, div.myclass:nth-of-type(1) sélectionnerait le premier élément avec la classe myclass dans son conteneur parent, quels que soient les éléments intermédiaires avec des balises différentes.

Exemple :

En utilisant le même code HTML qu'avant :

<code class="css">.myclass:nth-of-type(1) { /* first .myclass, regardless of its container */ }
.myclass:nth-of-type(2) { /* second .myclass, regardless of its container */ }
.myclass:nth-of-type(3) { /* third .myclass, regardless of its container */ }</code>

En utilisant ces sélecteurs, vous pouvez cibler avec précision des éléments spécifiques avec un nom de classe donné, permettant des mises en page complexes et dynamiques. en fonction de leur position dans la structure du document.

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!