Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Repostas Iguais em Exercício 6 - Aula 3 - Aninhamento ?

Ao fazer as atividades do curso, o exercício 6 da 3ª aula é sobre como um código sass será compilado em css:

a {
  color: orange;
  &:hover {
    color: blue;
  }
  span {
    display: inline;
  }
}

Percebi que o exercício oferece duas respostas iguais, uma delas apenas com espaçamento diferente, mas que não gera problemas:

Opção B :

a {color: orange;} a :hover {color: blue;} a span {display: inline;}

Opção C :

a { color: orange; } a:hover { color: blue; } a span { display: inline; }

Até verifiquei em software que compara textos (diffchecker) para ter a certeza e a única diferença entre essas opções é o espaçamento entre as chaves e no a :hover , que não faz diferença, testei no navegador e não deu problemas pelo menos.

Aquele espaço faz diferença em algum caso ou isso foi algum erro de digitação?

2 respostas
solução!

Olá, Lucas.

Faz diferença sim.

a:hover é o seletor que casa com um elemento a que esteja no estado hover (com o mouse nele). Já a :hover pega qualquer elemento que esteja no estado hover e que seja filho de um a.

<a href="#"><span>A</span> B</a>

Neste exemplo, a :hover pegaria somente o span contido no a, quando estivesse no estado hover.

Espero ter ajudado.

A sim, a regra hierárquica do CSS utilizando espaços! Esqueci dessa regra, ótima pergunta para nos lembrarmos dele.