Voltamos com a página da web com os links para as listas de pinturas famosas.
O CSS começa com uma regra que define uma fonte para tudo, que é a sans-serif.
E uma regra para agrupar os seletores que muda a fonte < h1 > e < h2 >
E temos um monte de regras que você provavelmente ainda não viu
e pode parecer um pouco engraçado.
Todas elas começam com a, seguido de dois pontos, e depois, uma palavra.
O que os dois pontos significam? O que estas regras poderiam selecionar?
Todas essas coisas que começam com dois pontos são chamados de pseudo-classes.
Uma pseudo-classe é usada para selecionar elementos
com base em informações que não são parte da estrutura da página
ou simplesmente não pode ser expresso usando outros seletores.
Aqui estou usando pseudo-classes para estilizar os links baseados em seu estado.
A pseudo-classe link selecionará todos os links da página que o usuário não visitou.
Que na maioria dos navegadores o padrão é azul.
A pseudo-classe visited selecionará todos os links que o usuário visitou.
Que na maioria dos navegadores o padrão é roxo.
Se quisermos, podemos mudar as cores.
Mas você deve ter uma boa razão pra isso.
As pessoas se acostumaram a associar azul e roxo com coisas que eles viram ou não.
As pessoas gostam de saber quais páginas elas visitaram.
Então você não deve tirar isso sem ter uma boa razão.
Vou apenas apagar essas duas regras.
Porque não acho que é uma boa ideia brincar com elas.
A próxima regra é divertida: a:hover.
A pseudo-classe hover selecionará um elemento enquanto o usuário
passar o mouse sobre ele.
Assim as propriedades só serão aplicadas depois.
Pause esse vídeo e passe o mouse sobre os links e veja o que acontece.
Pode pausar, eu espero...
Viu que mudou a cor de fundo? É um efeito muito legal.
E você pode usar essa pseudo-classe hover em qualquer elemento, não só em links.
Lembre-se que ele não funciona em todos os dispositivos
Se você estiver em um telefone você não tem uma hover. Só tem toque e não toque.
É ótimo ter um efeito hover como um bônus, mas não confie nele.
E sobre estes dois últimos aqui?
Eles são semelhantes ao hover.
Eles dependem do que o usuário está fazendo no momento
A pseudo-classe active seleciona elementos que estão sendo ativados.
Como em um link, se o usuário está clicando nele,
antes de mudar a página.
A pseudo-classe focus seleciona elementos que atualmente têm o foco,
o que geralmente acontece se usar a tecla Tab para navegar na tela.
Pause o vídeo, clique e segure nos links e pressine Tab para ver o que acontece.
Viu a mudança de cor do fundo quando você fez isso?
Escolhi a mesma propriedade para hover, active e focus porque são a mesma coisa.
O usuário tem como alvo o link de alguma forma.
Por isso muitos web designers utilizam as mesmas propriedades nesses três estados.
E se eu decidir que quero mudar a cor de fundo?
Poderia entrar em cada um deles
e alterar um por um.
ou poderia fazer o que acabamos de aprender.
Posso agrupar os seletores colocando-os em uma regra, separados por vírgulas.
Colocamos nossa vírgula assim, a:active e depois a:focus.
Agora eu posso excluir esses dois e mudar todos esses três de uma só vez.
Estas são as primeiras aulas de pseudo-classes que apresentamos,
mas não são as únicas.
Você pode procurar por CSS Pseudo-classes na internet pra saber mais
ou esperar para aprender mais aqui.
[Traduzido por Fernando dos Reis] [Revisado por Pablo Vieira]