WEBVTT

00:00:00.831 --> 00:00:05.211
Voltamos com a página da web com os
links para as listas de pinturas famosas.

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

00:00:11.743 --> 00:00:17.114
E uma regra para agrupar os seletores 
que muda a fonte <i>< h1 ></i> e <i>< h2 ></i>

00:00:17.114 --> 00:00:22.268
E temos um monte de regras que você 
provavelmente ainda não viu

00:00:22.268 --> 00:00:24.572
e pode parecer um pouco engraçado.

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

00:00:30.607 --> 00:00:35.504
O que os dois pontos significam?
O que estas regras poderiam selecionar?

00:00:36.834 --> 00:00:41.065
Todas essas coisas que começam com dois
pontos são chamados de pseudo-classes.

00:00:41.065 --> 00:00:44.012
Uma pseudo-classe é usada para 
selecionar elementos

00:00:44.012 --> 00:00:48.219
com base em informações que não 
são parte da estrutura da página

00:00:48.229 --> 00:00:51.606
ou simplesmente não pode ser expresso
usando outros seletores.

00:00:51.826 --> 00:00:57.430
Aqui estou usando pseudo-classes para
estilizar os links baseados em seu estado.

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

00:01:03.449 --> 00:01:06.582
Que na maioria dos navegadores
o padrão é azul.

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

00:01:10.405 --> 00:01:13.294
Que na maioria dos navegadores
o padrão é roxo.

00:01:13.294 --> 00:01:16.121
Se quisermos, podemos mudar as cores.

00:01:16.121 --> 00:01:18.083
Mas você deve ter uma boa razão pra isso.


00:01:18.083 --> 00:01:22.954
As pessoas se acostumaram a associar azul
e roxo com coisas que eles viram ou não.

00:01:22.954 --> 00:01:25.666
As pessoas gostam de saber quais
páginas elas visitaram.

00:01:25.666 --> 00:01:28.378
Então você não deve tirar isso sem
ter uma boa razão.

00:01:28.378 --> 00:01:31.092
Vou apenas apagar essas duas regras.

00:01:31.092 --> 00:01:34.221
Porque não acho que é uma boa ideia
brincar com elas.

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

00:01:39.942 --> 00:01:43.604
A pseudo-classe <i>hover</i> selecionará um
elemento enquanto o usuário

00:01:43.604 --> 00:01:45.586
passar o mouse sobre ele.

00:01:45.586 --> 00:01:48.408
Assim as propriedades só serão
aplicadas depois.

00:01:48.408 --> 00:01:53.353
Pause esse vídeo e passe o mouse
sobre os links e veja o que acontece.

00:01:53.353 --> 00:01:56.036
Pode pausar, eu espero...

00:01:57.406 --> 00:02:01.165
Viu que mudou a cor de fundo?
É um efeito muito legal.

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

00:02:05.073 --> 00:02:07.662
Lembre-se que ele não funciona
em todos os dispositivos

00:02:07.662 --> 00:02:11.421
Se você estiver em um telefone você não
tem uma hover. Só tem toque e não toque.

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

00:02:15.298 --> 00:02:17.887
E sobre estes dois últimos aqui?

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

00:02:20.476 --> 00:02:23.067
Eles dependem do que o usuário está
fazendo no momento

00:02:23.067 --> 00:02:27.191
A pseudo-classe <i>active</i> seleciona
elementos que estão sendo ativados.

00:02:27.191 --> 00:02:30.998
Como em um link, se o usuário está 
clicando nele,

00:02:30.998 --> 00:02:34.015
antes de mudar a página.

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

00:02:38.614 --> 00:02:42.394
o que geralmente acontece se usar a
tecla Tab para navegar na tela.

00:02:42.394 --> 00:02:48.084
Pause o vídeo, clique e segure nos links 
e pressine Tab para ver o que acontece.

00:02:48.894 --> 00:02:51.387
Viu a mudança de cor do fundo
quando você fez isso?

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

00:02:56.415 --> 00:02:58.842
O usuário tem como alvo o link
de alguma forma.

00:02:58.842 --> 00:03:03.655
Por isso muitos web designers utilizam as
mesmas propriedades nesses três estados.

00:03:03.655 --> 00:03:07.114
E se eu decidir que quero mudar
a cor de fundo?

00:03:07.114 --> 00:03:10.037
Poderia entrar em cada um deles

00:03:10.037 --> 00:03:12.850
e alterar um por um.

00:03:13.080 --> 00:03:15.725
ou poderia fazer o que acabamos
de aprender.

00:03:15.725 --> 00:03:20.140
Posso agrupar os seletores colocando-os
em uma regra, separados por vírgulas.

00:03:20.380 --> 00:03:27.214
Colocamos nossa vírgula assim, 
<i>a:active</i> e depois <i>a:focus</i>.

00:03:27.954 --> 00:03:37.108
Agora eu posso excluir esses dois e mudar
todos esses três de uma só vez.

00:03:37.108 --> 00:03:40.256
Estas são as primeiras aulas de 
pseudo-classes que apresentamos,

00:03:40.256 --> 00:03:41.654
mas não são as únicas.

00:03:41.654 --> 00:03:45.123
Você pode procurar por CSS Pseudo-classes
na internet pra saber mais

00:03:45.123 --> 00:03:47.474
ou esperar para aprender mais aqui.

00:03:47.474 --> 00:03:49.000
[Traduzido por Fernando dos Reis]
[Revisado por Pablo Vieira]