> 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