[Reclamação] Qual é a dificuldade de não explicar o nth-child?

Oi!

O seletor nth-child é uma pseudo-classe do CSS que permite selecionar elementos com base em sua posição dentro de um pai. Por exemplo, nth-child(2) seleciona o segundo filho de um elemento pai.

No projeto, você tá tentando ocultar determinados blocos de listas no menu para mobile.

1. Selecione os elementos que você deseja ocultar: No seu caso, são os blocos de listas que não são o primeiro.

2. Use o nth-child para selecionar esses blocos: Como você deseja ocultar os blocos de listas 2, 3 e 4, você pode usar nth-child assim:

.menu__lista:nth-child(2),
.menu__lista:nth-child(3),
.menu__lista:nth-child(4) {
    display: none;
}

Esse código diz ao navegador para não exibir os segundo, terceiro e quarto blocos de listas, deixando apenas o primeiro visível.

O exemplo completo:

/* MENU */
.menu__lista {
    display: flex;
}

.menu__lista:nth-child(2),
.menu__lista:nth-child(3),
.menu__lista:nth-child(4) {
    display: none;
}

Assim, apenas o primeiro bloco de lista será exibido no menu inferior da versão mobile.

Espero ter ajudado.

Um abraço e bons estudos.