Porque codamos o seletor dos links dessa forma: .lista__link a {...} e desta forma não funciona: .lista__link {...} O programa não promove estilo em sem que digamos em qual elemento deve recair a mudança, mesmo sendo .lista__link o pai das tags ?
Porque codamos o seletor dos links dessa forma: .lista__link a {...} e desta forma não funciona: .lista__link {...} O programa não promove estilo em sem que digamos em qual elemento deve recair a mudança, mesmo sendo .lista__link o pai das tags ?
Olá, João, como vai?
A diferença que você observou está relacionada à especificidade dos seletores CSS e ao comportamento de herança de estilo.
Quando usamos o seletor .lista__link a {...}, estamos aplicando o estilo diretamente à tag <a>
dentro do elemento com a classe .lista__link. Isso é necessário porque alguns estilos visuais não são herdados automaticamente pelos links a partir do elemento pai. Ou seja, o navegador não herda estilos como cor de texto, por padrão, para tags <a>
, exigindo que o seletor seja mais específico.
Já o seletor .lista__link {...} aplica o estilo diretamente ao elemento com essa classe, mas, como você percebeu, isso não afeta os elementos <a>
filhos de .lista__link, a menos que o estilo configurado seja herdável (por exemplo, font-family ou font-size).
Caso queira que todos os links em .lista__link recebam o estilo, o seletor .lista__link a {...} é a escolha ideal!
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)
Muito obrigado Mike, não sabia sobre isto, ajudou mesmo :)