.lista__link a{
text-decoration: none;
color: var(--branco-principal);
margin-left: 1em;
}
Minha dúvida seria porque se colocou o no css, porque não utlizou só o .lista__link?
Ainda não tinha visto dessa forma.
.lista__link a{
text-decoration: none;
color: var(--branco-principal);
margin-left: 1em;
}
Minha dúvida seria porque se colocou o no css, porque não utlizou só o .lista__link?
Ainda não tinha visto dessa forma.
Olá, Antonio!
Obrigado por compartilhar sua dúvida no fórum Alura.
Quando usamos .lista__link a, estamos dizendo ao CSS: “aplique esses estilos apenas à tag <a> que está dentro de .lista__link”.
Isso é importante porque:
.lista__link normalmente é um elemento contêiner (como li, div, etc.)color e text-decoration afetam diretamente o texto do link, que está na tag <a>, e não no contêinerVeja a diferença na prática:
HTML
<li class="lista__link">
<a href="#">Home</a>
</li>
CSS usando apenas a classe
.lista__link {
color: red;
text-decoration: none;
}
Nesse caso, o text-decoration não remove o sublinhado do link, porque ele pertence ao <a>.
CSS correto
.lista__link a {
color: red;
text-decoration: none;
}
Dessa forma o CSS atinge diretamente a âncora, removendo o sublinhado e aplicando a cor corretamente.
Espero que agora tenha ficado mais claro. Conte conosco!
Abraços e bons estudos! ✨