Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Duvida sobre chamar a .secao-horizontal

Acho que não entendi 100% o motivo de ter que chamar essa classe também. Entendi que deveríamos "pegar o caminho" da classe .secao__cartoes para não afetar nas outras vezes em que ele for chamado, é isso? Fazendo algo como ".secao-horizontal, .secao__cartoes { };" eu posso alterar SOMENTE esse .secao__cartoes dentro da .secao-horizontal, deixando de fora qualquer outro .secao__cartoes que possa vir a aparecer no código?

1 resposta
solução!

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! ✓