Por que :nth-child não funciona?

Oi Juliana, tudo bem?

Você poderia me mandar o seu código HTML também para eu dar uma olhada e entender o problema?

Fico no aguardo!

Boa tarde, Giovanna! Seria o index.html do curso de flexbox. Não cabe todo aqui, vou colar apenas o trecho do header. Se faltar alguma coisa me avise, por favor. Segue:

    <header class="cabecalhoPrincipal">
        <div class="container">
            <h1 class="cabecalhoPrincipal-titulo">
                <a href="#">Alurinha</a>
            </h1>

            <nav class="cabecalhoPrincipal-nav">
                <a class="cabecalhoPrincipal-nav-link" href="#">Home</a>
                <a class="cabecalhoPrincipal-nav-link" href="#">Cursos</a>
                <a class="cabecalhoPrincipal-nav-link" href="#">Sobre nós</a>
                <a class="cabecalhoPrincipal-nav-link" href="#">Contato</a>
                <a class="cabecalhoPrincipal-nav-link cabecalhoPrincipal-nav-link-app" href="#">Nosso APP</a>
            </nav>
        </div>

    </header>

Ju, o problema acontece porque para pegarmos o elemento através do child, precisamos especificar qual ele é.

Ou seja, não adianta colocarmos apenas: .cabecalhoPrincipal-nav:nth-child(), precisamos colocar o elemento que será selecionado. Nesse caso, você quer selecionar um <a>, portanto precisamos fazer da seguinte maneira:

.cabecalhoPrincipal-nav a:nth-child(5) {
    order: -1;
}

Mas, caso você não queira especificar o elemento, você só precisa dar um espaço entre a classe e o nth-child, desse jeito:

.cabecalhoPrincipal-nav :nth-child(5) {
    order: -1;
}

Assim, ele vai pegar qualquer elemento que esteja na posição 5, independente de ser um <a> ou não.

E para selecionar o último elemento, utilizamos last-child:

.cabecalhoPrincipal-nav a:last-child {
    order: -1;
}

Espero ter ajudado!

Bom dia!

Como eu lia "filho numero tal" entendia que tinha que referenciar o pai, pra então ele pegar qual dos filhos hahaha Mas acho que agora entendi. Muito obrigada pela explicação! <3