Comment sélectionner des éléments spécifiques à l'aide des sélecteurs nième-enfant ou nième-type ?

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

Pour sélectionner le premier, le deuxième ou le troisième élément avec un nom de classe, vous pouvez utiliser les pseudo-sélecteurs de nième enfant ou de nième de type. Ces sélecteurs vous permettent de cibler des éléments spécifiques en fonction de leur position dans un conteneur parent ou parmi leurs frères et sœurs du même type.

Utilisation du nième-enfant

Le nième-enfant Le sélecteur enfant sélectionne les éléments en fonction de leur position parmi tous les éléments enfants d'un parent. Pour cibler des éléments spécifiques avec un nom de classe, enveloppez vos éléments dans un conteneur parent et utilisez la syntaxe suivante :

<code class="css">parent_container:nth-child(item number) { ... }</code>

Par exemple, si vos éléments sont contenus dans un élément parent avec le nom de classe "parent_class, " vous pouvez sélectionner les premier, deuxième et troisième éléments avec le nom de classe "myclass" comme suit :

<code class="css">.parent_class:nth-child(1) { ... }
.parent_class:nth-child(2) { ... }
.parent_class:nth-child(3) { ... }</code>

Utilisation du nième de type

Le Le sélecteur nième de type sélectionne les éléments en fonction de leur position parmi les frères et sœurs du même type. Ceci est utile lorsque vous avez plusieurs classes dans un conteneur parent et que vous souhaitez cibler des éléments spécifiques avec un nom de classe particulier. La syntaxe est similaire à nth-child :

<code class="css">class_name:nth-of-type(item number) { ... }</code>

En appliquant ceci à votre exemple, vous pouvez sélectionner les premier, deuxième et troisième éléments avec le nom de classe "myclass" comme suit :

<code class="css">.myclass:nth-of-type(1) { ... }
.myclass:nth-of-type(2) { ... }
.myclass:nth-of-type(3) { ... }</code>

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!