Ciblage d'éléments spécifiques avec des noms de classe : une approche CSS du nième enfant

Défi : Styliser sélectivement les éléments avec le même nom de classe en fonction de leur position, quel que soit leur emplacement dans le balisage.

Solution : Utilisez nth-child() ou Pseudo-sélecteurs nth-of-type() pour cibler les éléments en fonction de leur position ordinale dans un élément parent.

nth-child() Pseudo-Selector

Le nième-enfant(n) le pseudo-sélecteur vous permet de styliser un élément qui est le nième enfant de son parent. Par exemple, pour cibler le premier élément avec la classe "myclass":

.parent_class:nth-child(1) {
  color: #000;
}

Pour cibler les deuxième et troisième éléments, utilisez les sélecteurs suivants :

.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}

pseudo-sélecteur nth-of-type()

Le pseudo-sélecteur nth-of-type(n) fonctionne de la même manière que nth-child(), mais il sélectionne des éléments en fonction de leur type chez leur parent. Ceci est utile lorsque vous avez plusieurs éléments du même type au sein d'un parent :

.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}

Exemple HTML :

  
my text1
  

  
my text2
  

  
my text3