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]