Duvidas Classes | HTML e CSS: praticando HTML/CSS

no html

<section class= "container principal">
            <div class="container__caixa">
                <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>
            </div>
        </section>

No css para remover o sublinha e azul do link

    .container__botao{
    text-decoration: none;
}

Pq no comando a baixo tive que coloca a classe e a letra a

HTML:

<footer class="rodape">
            <img src="./img/Logo.png" class="rodape__logo">
            <ul class="rodape__lista">
                <li class="lista__link">
                    <a href="#">Idioma</a>
                </li>
 </footer>

CSS: pq o a, sendo que esta do mesmo jeito do exemplo a cima, sendo que so funciona com o a apos nome da classe

   .lista__link a{ 
    text-decoration: none;
    color: var(--branco-principal);
    margin-left: 1em;
}

Olá, David!

Sua dúvida é bem interessante. A diferença entre os dois exemplos que você deu está no elemento HTML que recebeu a classe.

No primeiro exemplo, a classe "container__botao" foi aplicada diretamente no elemento "a" (link), por isso você pode estilizar o link diretamente usando apenas o nome da classe no CSS.

<a href="www.alura.com.br" class="container__botao">Assine por 12x de R$ 120,00*</a>

.container__botao{
    text-decoration: none;
}

No segundo exemplo, a classe "lista__link" foi aplicada no elemento "li", que é o pai do elemento "a" (link). Nesse caso, para estilizar o link, você precisa especificar que deseja estilizar o elemento "a" que é filho da classe "lista__link". Por isso, você usa a sintaxe ".lista__link a".

<li class="lista__link">
    <a href="#">Idioma</a>
</li>

.lista__link a{ 
    text-decoration: none;
    color: var(--branco-principal);
    margin-left: 1em;
}

Em resumo, fazermos isso tanto para organização, quanto para a aplicação de fato, então imagina que um pai pode ter vários filhos, sendo ele uma tag <a> ou uma tag <p>, se queremos trocar a cor somente do filho "chamado p" então vamos ter que especificar, ficando, por exemplo, lista__link p, deste modo o "filho a" não sofrer as modificações.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!