0:00:00.831,0:00:05.211
Voltamos com a página da web com os[br]links para as listas de pinturas famosas.

0:00:05.211,0:00:11.743
O CSS começa com uma regra que define[br]uma fonte para tudo, que é a <i>sans-serif</i>.

0:00:11.743,0:00:17.114
E uma regra para agrupar os seletores [br]que muda a fonte <i>< h1 ></i> e <i>< h2 ></i>

0:00:17.114,0:00:22.268
E temos um monte de regras que você [br]provavelmente ainda não viu

0:00:22.268,0:00:24.572
e pode parecer um pouco engraçado.

0:00:24.572,0:00:29.967
Todas elas começam com <i>a</i>, seguido de[br]dois pontos, e depois, uma palavra.

0:00:30.607,0:00:35.504
O que os dois pontos significam?[br]O que estas regras poderiam selecionar?

0:00:36.834,0:00:41.065
Todas essas coisas que começam com dois[br]pontos são chamados de pseudo-classes.

0:00:41.065,0:00:44.012
Uma pseudo-classe é usada para [br]selecionar elementos

0:00:44.012,0:00:48.219
com base em informações que não [br]são parte da estrutura da página

0:00:48.229,0:00:51.606
ou simplesmente não pode ser expresso[br]usando outros seletores.

0:00:51.826,0:00:57.430
Aqui estou usando pseudo-classes para[br]estilizar os links baseados em seu estado.

0:00:57.430,0:01:03.449
A pseudo-classe <i>link</i> selecionará todos os[br]links da página que o usuário não visitou.

0:01:03.449,0:01:06.582
Que na maioria dos navegadores[br]o padrão é azul.

0:01:06.582,0:01:10.405
A pseudo-classe <i>visited</i> selecionará[br]todos os links que o usuário visitou.

0:01:10.405,0:01:13.294
Que na maioria dos navegadores[br]o padrão é roxo.

0:01:13.294,0:01:16.121
Se quisermos, podemos mudar as cores.

0:01:16.121,0:01:18.083
Mas você deve ter uma boa razão pra isso.[br]

0:01:18.083,0:01:22.954
As pessoas se acostumaram a associar azul[br]e roxo com coisas que eles viram ou não.

0:01:22.954,0:01:25.666
As pessoas gostam de saber quais[br]páginas elas visitaram.

0:01:25.666,0:01:28.378
Então você não deve tirar isso sem[br]ter uma boa razão.

0:01:28.378,0:01:31.092
Vou apenas apagar essas duas regras.

0:01:31.092,0:01:34.221
Porque não acho que é uma boa ideia[br]brincar com elas.

0:01:35.531,0:01:38.972
A próxima regra é divertida: <i>a:hover</i>.

0:01:39.942,0:01:43.604
A pseudo-classe <i>hover</i> selecionará um[br]elemento enquanto o usuário

0:01:43.604,0:01:45.586
passar o mouse sobre ele.

0:01:45.586,0:01:48.408
Assim as propriedades só serão[br]aplicadas depois.

0:01:48.408,0:01:53.353
Pause esse vídeo e passe o mouse[br]sobre os links e veja o que acontece.

0:01:53.353,0:01:56.036
Pode pausar, eu espero...

0:01:57.406,0:02:01.165
Viu que mudou a cor de fundo?[br]É um efeito muito legal.

0:02:01.165,0:02:05.073
E você pode usar essa pseudo-classe <i>hover</i>[br]em qualquer elemento, não só em links.

0:02:05.073,0:02:07.662
Lembre-se que ele não funciona[br]em todos os dispositivos

0:02:07.662,0:02:11.421
Se você estiver em um telefone você não[br]tem uma hover. Só tem toque e não toque.

0:02:11.421,0:02:15.298
É ótimo ter um efeito <i>hover</i> como[br]um bônus, mas não confie nele.

0:02:15.298,0:02:17.887
E sobre estes dois últimos aqui?

0:02:17.887,0:02:20.476
Eles são semelhantes ao <i>hover</i>.

0:02:20.476,0:02:23.067
Eles dependem do que o usuário está[br]fazendo no momento

0:02:23.067,0:02:27.191
A pseudo-classe <i>active</i> seleciona[br]elementos que estão sendo ativados.

0:02:27.191,0:02:30.998
Como em um link, se o usuário está [br]clicando nele,

0:02:30.998,0:02:34.015
antes de mudar a página.

0:02:34.465,0:02:38.614
A pseudo-classe <i>focus</i> seleciona[br]elementos que atualmente têm o foco,

0:02:38.614,0:02:42.394
o que geralmente acontece se usar a[br]tecla Tab para navegar na tela.

0:02:42.394,0:02:48.084
Pause o vídeo, clique e segure nos links [br]e pressine Tab para ver o que acontece.

0:02:48.894,0:02:51.387
Viu a mudança de cor do fundo[br]quando você fez isso?

0:02:51.527,0:02:56.415
Escolhi a mesma propriedade para <i>hover</i>, [br]<i>active</i> e <i>focus</i> porque são a mesma coisa.

0:02:56.415,0:02:58.842
O usuário tem como alvo o link[br]de alguma forma.

0:02:58.842,0:03:03.655
Por isso muitos web designers utilizam as[br]mesmas propriedades nesses três estados.

0:03:03.655,0:03:07.114
E se eu decidir que quero mudar[br]a cor de fundo?

0:03:07.114,0:03:10.037
Poderia entrar em cada um deles

0:03:10.037,0:03:12.850
e alterar um por um.

0:03:13.080,0:03:15.725
ou poderia fazer o que acabamos[br]de aprender.

0:03:15.725,0:03:20.140
Posso agrupar os seletores colocando-os[br]em uma regra, separados por vírgulas.

0:03:20.380,0:03:27.214
Colocamos nossa vírgula assim, [br]<i>a:active</i> e depois <i>a:focus</i>.

0:03:27.954,0:03:37.108
Agora eu posso excluir esses dois e mudar[br]todos esses três de uma só vez.

0:03:37.108,0:03:40.256
Estas são as primeiras aulas de [br]pseudo-classes que apresentamos,

0:03:40.256,0:03:41.654
mas não são as únicas.

0:03:41.654,0:03:45.123
Você pode procurar por CSS Pseudo-classes[br]na internet pra saber mais

0:03:45.123,0:03:47.474
ou esperar para aprender mais aqui.

0:03:47.474,0:03:49.000
[Traduzido por Fernando dos Reis][br][Revisado por Pablo Vieira]