Comment puis-je styliser des éléments portant le même nom de classe en fonction de leur position dans le DOM ?

Ciblage d'éléments spécifiques avec des noms de classe : une approche CSS 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 les pseudo-sélecteurs nth-child() ou nth-of-type() pour cibler les éléments en fonction de leur position ordinale dans un élément parent.

Pseudo-Selector nth-child()

Le pseudo-sélecteur nth-child(n) 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" :

<code class="css">.parent_class:nth-child(1) {
  color: #000;
}</code>

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

<code class="css">.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}</code>

nth-of-type () Pseudo-Selector

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

<code class="css">.myclass:nth-of-type(1) {
  color: #000;
}

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

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

Exemple HTML :

<code class="html"><div class="parent_class">
  <div class="myclass">my text1</div>
  <!-- Other code -->

  <div class="myclass">my text2</div>
  <!-- Other code -->

  <div class="myclass">my text3</div>
  <!-- Other code -->
</div></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!