Porque neste exercício foi usado
div:nth-child(1) { background-color: red; width:50px;height: 50px;}
e não o pai?:
.flexContainer : nth-child(1) { background-color: red; width:50px;height: 50px;}
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Porque neste exercício foi usado
div:nth-child(1) { background-color: red; width:50px;height: 50px;}
e não o pai?:
.flexContainer : nth-child(1) { background-color: red; width:50px;height: 50px;}
refiz a pergunta
Olá Mariana, tudo bem?
Desculpe a demora em retornar.
No exercício que você mencionou, foi utilizado o seletor "div:nth-child(1)" para selecionar o primeiro elemento filho dentro da div. Isso significa que apenas o primeiro elemento filho dentro da div será afetado por essa regra de estilo.
Já o seletor ".flexContainer :nth-child(1)" selecionaria todos os elementos que são o primeiro filho de seus respectivos pais dentro da classe "flexContainer". Isso pode incluir elementos que não estão diretamente dentro da div que você deseja estilizar.
Em resumo, é melhor usar div:nth-child(1) para selecionar diretamente o elemento que você deseja estilizar, em vez de depender de um seletor que pode selecionar vários elementos indesejados.
Espero ter ajudado e bons estudos!