Olá João! Tudo ok contigo?
Quando você escreve .secao-horizontal .secao__cartoes { };
(sem a vírgula, a vírgula indica que você quer adicionar aqueles estilos tanto na classe antes da vírgula, como na depois da vírgula), você está especificando que quer aplicar um estilo apenas aos elementos que possuem a classe .secao__cartoes
e que são filhos em qualquer nível hierárquico de um elemento com a classe .secao-horizontal
. Isso é conhecido como seletor descendente.
Portanto, ao usar .secao-horizontal .secao__cartoes { };
, você está alterando apenas os elementos .secao__cartoes
que estão dentro de .secao-horizontal
, deixando de fora qualquer outro .secao__cartoes
que possa aparecer em outras partes do código.
Por exemplo, se você tiver o seguinte HTML:
<div class="secao-horizontal">
<div class="secao__cartoes">...</div>
</div>
<div class="secao-vertical">
<div class="secao__cartoes">...</div>
</div>
Ao aplicar o estilo .secao-horizontal .secao__cartoes { background-color: red; }
, apenas o .secao__cartoes
que está dentro de .secao-horizontal
terá a cor de fundo vermelha. O .secao__cartoes
que está dentro de .secao-vertical
não será afetado por esse estilo.
Agora, como eu mencionei brevemente antes, ao usar .secao-horizontal, .secao__cartoes { };
com a vírgula entre eles, você vai selecionar ambos, então em um caso onde temos:
<div class="secao-horizontal">
<div class="secao__cartoes">...</div>
<h2 class="secao__titulo">...</h2>
<span class="secao__extra">...</span>
</div>
<p class="texto-meio">...</p>
<div class="secao-vertical">
<span class="secao__extra">...</span>
<div class="secao__cartoes">...</div>
</div>
E usamos isso:
.secao-horizontal .secao__cartoes,
.texto-meio,
.secao-vertical .secao__extra {
color: green;
background-color: purple;
}
Todas as div
com a classe secao__cartoes
que são filhas da div
com a classe secao-horizontal
, a tag de parágrafo, e o span
com a classe secao__extra
que é filho da div
com a classe secao-vertical
irão ter cor verde, e fundo roxo. Pois o seletor vírgula(,) indica que você está selecionando mais de um elemento.
Se quiser ver mais sobre isso, acesse esse link!
Era isso! Se tiver dúvidas eu estarei por aqui!
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓