Apuntar a elementos específicos con nombres de clase: un enfoque de enésimo hijo de CSS

Desafío: Diseñar selectivamente elementos con el mismo nombre de clase según su posición, independientemente de su ubicación en el marcado.

Solución: Utilice nth-child() o Pseudoselectores nth-of-type() para apuntar a elementos según su posición ordinal dentro de un elemento padre.

Pseudo-Selector nth-child()

El nth-child() El pseudo-selector le permite diseñar un elemento que es el enésimo hijo de su padre. Por ejemplo, para apuntar al primer elemento con la clase "myclass":

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

Para apuntar al segundo y tercer elemento, utilice los siguientes selectores:

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

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

Pseudo-Selector nth-of-type()

El pseudo-selector nth-of-type(n) funciona de manera similar a nth-child(), pero selecciona elementos basándose en su tipo dentro de su padre. Esto es útil cuando tienes varios elementos del mismo tipo dentro de un padre:

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

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

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

Ejemplo de HTML:

  
my text1
  

  
my text2
  

  
my text3