Skip to main content
1 de 4
LipESprY
  • 4,6mil
  • 2
  • 21
  • 36

O seletor nth-child(n) corresponde a cada elemento que é o enésimo filho, independentemente do tipo, de seu pai.

Fonte: W3Schools - CSS :nth-child() Selector

Ao utilizar tal seletor, você deve atentar-se principalmente ao elemento pai.

Difícil entender, mas é assim mesmo! Você cria o seletor e ele considera todos os elementos filhos de seu pai! (Bugou?!)

"- O texto do primeiro elemento da classe .classe não fica vermelho, como se esperaria. Porém, se eu alterar o valor do .nth-child para (2), irá aplicar a cor vermelha ao primeiro elemento da classe (não ao segundo, como se esperaria)." (sic)

Veja este exemplo (na pergunta):

<!DOCTYPE html>
<html>
    <head>
        <style>
            .classe:nth-child(1) {
               color: red;
            }
        </style>
    </head>
    <body>
        <div>texto preto</div>
        <div class="classe">este texto era pra ser vermelho :(</div>
        <div class="classe">texto preto</div>
    </body>
</html>
  • <body> é o elemento pai;
  • <div>texto preto</div> é o elemento filho #1. Equivalente a :nth-child(1);
  • <div class="classe">este texto era pra ser vermelho :(</div> é o elemento filho #2. Equivalente a :nth-child(2);
  • <div class="classe">texto preto</div> é o elemento filho #3. Equivalente a :nth-child(3);

Acontece que para o seletor .classe:nth-child(1) funcionar no filho #1, ele não poderia ter mencionado a classe-alvo: .classe! Dessa forma, só vai "bindar" quando bater o número do elemento com a classe (Ahh, e não se esqueça do papai!).

Outra questão: se consideram os filhos do pai! Independente de qual for o tipo do filho! Veja:

<body>
    <div>texto preto</div>
    <p class="classe">este texto era pra ser vermelho :(</p>
    <span class="classe">texto preto</span>
    <strong>texto preto</strong>
    <i>texto preto</i>
</body>
  • <body> é o elemento pai;

  • <div>texto preto</div> é o elemento filho #1;

  • <p class="classe">este texto era pra ser vermelho :(</p> é o elemento filho #2;

  • <span class="classe">texto preto</span> é o elemento filho #3;

  • <strong>texto preto</strong> é o elemento filho #4;

  • <i>texto preto</i> é o elemento filho #5;

Esta resposta é um complemento da resposta do hugocsl.

LipESprY
  • 4,6mil
  • 2
  • 21
  • 36