Dúvida sobre uso de dos seletores de classes no CSS

Olá!
Tenho a seguinte dúvida: Na aula a Professora Mônica criou uma classe no CSS da seguinte forma:
.lista__link a:hover{ color: var(--botao-azul); }
O ponto está aí, este espaço que tem entre a ".lista__link" e "a", siginifica soma ou junção das duas, ou quer dizer que estou selecionando especificamente o elemento "a"?
Tal dúvida também se dá no HTML, em que, como no trecho de código, por exemplo:
<section class="principal container"> <div class="container__caixa"> <h1 class="container__titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1> <img src="img/Combo.png" alt="O combo+ é a junção do alura+ e o alura língua" class="container__imagem"> <a href="www.alura.com.br" class="container__botao">Assine por 12x de R$ 120,00*</a> <a href="www.alura.com.br" class="container__botao botao_secundario">Assinar somente o Alura+</a> <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p> </div> </section>
No trecho de código em HTML <section class="principal container">, a classes principal e container, tem o entendimento de soma ou individualização, ou alternância?
Espero ter me feito entender e aguardo a resposta, desde já, agradeço.
Deus abençoe a quem puder ajudar!

Olá, Rafael!

Obrigado por compartilhar sua dúvida no fórum.

Esse ponto realmente costuma gerar confusão no início. Vamos por partes.

Espaço no seletor CSS (`.lista__link a:hover`)

No CSS, o espaço entre seletores não significa soma nem junção. Ele indica uma relação de descendência.

Ou seja, neste caso:

.lista__link a:hover {
  color: var(--botao-azul);
}

Estamos dizendo:
“Selecione o elemento <a> que está dentro de um elemento com a classe .lista__link, quando ele estiver em hover.”

Então:

.lista__link → elemento pai
a → elemento filho (ou descendente)
:hover → estado do link

Se fosse junção, não haveria espaço:

.lista__linka { }

(que, nesse caso, seria uma classe totalmente diferente)

Ou ainda:

a.lista__link { }

Aqui estaríamos selecionando um <a> que possui diretamente a classe lista__link.

Classes múltiplas no HTML (`class="principal container"`)

No HTML, quando você escreve:

<section class="principal container">

Isso significa que o elemento possui duas classes ao mesmo tempo:

principal
container

Nesse caso, o comportamento é de soma de estilos, não de alternância.

Ou seja:

Tudo que estiver em .principal será aplicado
Tudo que estiver em .container também será aplicado

Exemplo:

.principal {
  background-color: black;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

O <section> receberá todos esses estilos juntos.

Selecionando elementos com múltiplas classes no CSS

Se você quiser selecionar somente elementos que tenham as duas classes ao mesmo tempo, usa-se sem espaço:

.principal.container {
  padding: 2rem;
}

Isso significa:
“Selecione elementos que tenham principal E container simultaneamente.”

Espero que tenha entendido, conte conosco!

Abraços e bons estudos! ✨

Espaço no seletor CSS (.lista__link a:hover)

Classes múltiplas no HTML (class="principal container")

Selecionando elementos com múltiplas classes no CSS

Espaço no seletor CSS (`.lista__link a:hover`)

Classes múltiplas no HTML (`class="principal container"`)