-
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]
