> 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][1] 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): <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .classe:nth-child(1) { color: red; } <!-- language: lang-html --> <!DOCTYPE html> <html> <body> <div>texto preto</div> <div class="classe">este texto era pra ser vermelho :(</div> <div class="classe">texto preto</div> </body> </html> <!-- end snippet --> - `<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 do tipo do filho**! Veja: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <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> <!-- end snippet --> - `<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][2] do [hugocsl][3]. [1]: https://www.w3schools.com/csSref/sel_nth-child.asp [2]: https://pt.stackoverflow.com/a/353798/45810 [3]: https://pt.stackoverflow.com/users/97477/hugocsl