Ao modificar as classes secao-horizontal e secao-vertical, no arquivo secao.css, foi adicionado uma vírgula entre elas. Porém ao modificar as classes secao-horizontal e secao__cartoes não há vírgula entre as mesmas. Por quê?
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!
Ao modificar as classes secao-horizontal e secao-vertical, no arquivo secao.css, foi adicionado uma vírgula entre elas. Porém ao modificar as classes secao-horizontal e secao__cartoes não há vírgula entre as mesmas. Por quê?
Oi, Etiene, tudo bem?
Em CSS, você pode definir seletores para vários elementos, agrupando classes separadas por vírgulas. Por exemplo:
.secao-horizontal, .secao-vertical {
grid-template-rows: 70px auto;
}
Neste caso, ambas as classes secao-horizontale secao-verticalrecebem os estilos aplicados no arquivo CSS.
Por outro lado, se temos seletores que não são separados por vírgula como este:
.secao-horizontal .secao__cartoes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(80%/2, max(350px, 80%/3)), 1fr));
gap: 1.25rem;
}
Isso indica que estamos buscando dentro da classe secao-horizontal a classe secao-cartoesque aparece na sequência e estamos aplicando especificamente a ela o estilo definido.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!