Vi que voce usou os seguintes :
.lista__link a:hover
.container__botao:hover
Porque o primeiro tem o a: e o segundo não ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Vi que voce usou os seguintes :
.lista__link a:hover
.container__botao:hover
Porque o primeiro tem o a: e o segundo não ?
Olá, Eduardo!
Tudo bem?
A diferença entre os dois seletores está no elemento que está sendo selecionado. No primeiro seletor, ".lista__link a:hover", estamos selecionando o elemento "a" que está dentro do elemento com a classe "lista__link" quando ele está em estado de hover. Já no segundo seletor, ".container__botao:hover", estamos selecionando diretamente o elemento com a classe "container__botao" quando ele está em estado de hover.
Vamos supor que você tenha a seguinte estrutura HTML:
<div class="lista__link">
<a href="#">Link</a>
</div>
<div class="container__botao">
<button>Botão</button>
</div>
No primeiro seletor, ".lista__link a:hover", quando o mouse passar por cima do link dentro do elemento com a classe "lista__link", o estilo definido para o hover será aplicado.
No segundo seletor, ".container__botao:hover", quando o mouse passar por cima do elemento com a classe "container__botao", o estilo definido para o hover será aplicado.
Espero ter esclarecido sua dúvida! Se tiver mais alguma, é só me dizer. Bons estudos!
Espero ter ajudado e bons estudos!
Boa noite Renan ,
Esse a: está se referindo à ancora do lista__link que foi referenciado no index.html correto?
Isso mesmo, é comum passarmos a tag <a> depois da classe da tag pai, para referenciar as tags ancoras, quando queremo aplicar algum estilo nos links, no caso a classe da tag pai: .lista__link fica assim: .lista__link a:hover.