Segmentando elementos específicos com nomes de classes: uma abordagem CSS n-th-child

Desafio: Estilizar elementos seletivamente com o mesmo nome de classe com base em seus posição, independentemente de sua localização na marcação.

Solução: Utilize nth-child() ou Pseudosseletores nth-of-type() para direcionar elementos de acordo com sua posição ordinal dentro de um elemento pai.

nth-child() Pseudo-seletor

O nth-child(n) O pseudo-seletor permite estilizar um elemento que é o enésimo filho de seu pai. Por exemplo, para direcionar o primeiro elemento com a classe "myclass":

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

Para direcionar o segundo e terceiro elementos, use os seguintes seletores:

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

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

nth-of-type() Pseudo-seletor

O pseudosseletor nth-of-type(n) funciona de forma semelhante ao nth-child(), mas seleciona elementos com base em seu tipo dentro de seu pai. Isso é útil quando você tem vários elementos do mesmo tipo em um pai:

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

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

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

Exemplo de HTML:

  
my text1
  

  
my text2
  

  
my text3