Vi que voce usou os seguintes :
.lista__link a:hover
.container__botao:hover
Porque o primeiro tem o a: e o segundo não ?
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.