1
00:00:00,831 --> 00:00:05,211
Voltamos com a página da web com os
links para as listas de pinturas famosas.

2
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>.

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

4
00:00:17,114 --> 00:00:22,268
E temos um monte de regras que você 
provavelmente ainda não viu

5
00:00:22,268 --> 00:00:24,572
e pode parecer um pouco engraçado.

6
00:00:24,572 --> 00:00:29,967
Todas elas começam com <i>a</i>, seguido de
dois pontos, e depois, uma palavra.

7
00:00:30,607 --> 00:00:35,504
O que os dois pontos significam?
O que estas regras poderiam selecionar?

8
00:00:36,834 --> 00:00:41,065
Todas essas coisas que começam com dois
pontos são chamados de pseudo-classes.

9
00:00:41,065 --> 00:00:44,012
Uma pseudo-classe é usada para 
selecionar elementos

10
00:00:44,012 --> 00:00:48,219
com base em informações que não 
são parte da estrutura da página

11
00:00:48,229 --> 00:00:51,606
ou simplesmente não pode ser expresso
usando outros seletores.

12
00:00:51,826 --> 00:00:57,430
Aqui estou usando pseudo-classes para
estilizar os links baseados em seu estado.

13
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.

14
00:01:03,449 --> 00:01:06,582
Que na maioria dos navegadores
o padrão é azul.

15
00:01:06,582 --> 00:01:10,405
A pseudo-classe <i>visited</i> selecionará
todos os links que o usuário visitou.

16
00:01:10,405 --> 00:01:13,294
Que na maioria dos navegadores
o padrão é roxo.

17
00:01:13,294 --> 00:01:16,121
Se quisermos, podemos mudar as cores.

18
00:01:16,121 --> 00:01:18,083
Mas você deve ter uma boa razão pra isso.


19
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.

20
00:01:22,954 --> 00:01:25,666
As pessoas gostam de saber quais
páginas elas visitaram.

21
00:01:25,666 --> 00:01:28,378
Então você não deve tirar isso sem
ter uma boa razão.

22
00:01:28,378 --> 00:01:31,092
Vou apenas apagar essas duas regras.

23
00:01:31,092 --> 00:01:34,221
Porque não acho que é uma boa ideia
brincar com elas.

24
00:01:35,531 --> 00:01:38,972
A próxima regra é divertida: <i>a:hover</i>.

25
00:01:39,942 --> 00:01:43,604
A pseudo-classe <i>hover</i> selecionará um
elemento enquanto o usuário

26
00:01:43,604 --> 00:01:45,586
passar o mouse sobre ele.

27
00:01:45,586 --> 00:01:48,408
Assim as propriedades só serão
aplicadas depois.

28
00:01:48,408 --> 00:01:53,353
Pause esse vídeo e passe o mouse
sobre os links e veja o que acontece.

29
00:01:53,353 --> 00:01:56,036
Pode pausar, eu espero...

30
00:01:57,406 --> 00:02:01,165
Viu que mudou a cor de fundo?
É um efeito muito legal.

31
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.

32
00:02:05,073 --> 00:02:07,662
Lembre-se que ele não funciona
em todos os dispositivos

33
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.

34
00:02:11,421 --> 00:02:15,298
É ótimo ter um efeito <i>hover</i> como
um bônus, mas não confie nele.

35
00:02:15,298 --> 00:02:17,887
E sobre estes dois últimos aqui?

36
00:02:17,887 --> 00:02:20,476
Eles são semelhantes ao <i>hover</i>.

37
00:02:20,476 --> 00:02:23,067
Eles dependem do que o usuário está
fazendo no momento

38
00:02:23,067 --> 00:02:27,191
A pseudo-classe <i>active</i> seleciona
elementos que estão sendo ativados.

39
00:02:27,191 --> 00:02:30,998
Como em um link, se o usuário está 
clicando nele,

40
00:02:30,998 --> 00:02:34,015
antes de mudar a página.

41
00:02:34,465 --> 00:02:38,614
A pseudo-classe <i>focus</i> seleciona
elementos que atualmente têm o foco,

42
00:02:38,614 --> 00:02:42,394
o que geralmente acontece se usar a
tecla Tab para navegar na tela.

43
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.

44
00:02:48,894 --> 00:02:51,387
Viu a mudança de cor do fundo
quando você fez isso?

45
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.

46
00:02:56,415 --> 00:02:58,842
O usuário tem como alvo o link
de alguma forma.

47
00:02:58,842 --> 00:03:03,655
Por isso muitos web designers utilizam as
mesmas propriedades nesses três estados.

48
00:03:03,655 --> 00:03:07,114
E se eu decidir que quero mudar
a cor de fundo?

49
00:03:07,114 --> 00:03:10,037
Poderia entrar em cada um deles

50
00:03:10,037 --> 00:03:12,850
e alterar um por um.

51
00:03:13,080 --> 00:03:15,725
ou poderia fazer o que acabamos
de aprender.

52
00:03:15,725 --> 00:03:20,140
Posso agrupar os seletores colocando-os
em uma regra, separados por vírgulas.

53
00:03:20,380 --> 00:03:27,214
Colocamos nossa vírgula assim, 
<i>a:active</i> e depois <i>a:focus</i>.

54
00:03:27,954 --> 00:03:37,108
Agora eu posso excluir esses dois e mudar
todos esses três de uma só vez.

55
00:03:37,108 --> 00:03:40,256
Estas são as primeiras aulas de 
pseudo-classes que apresentamos,

56
00:03:40,256 --> 00:03:41,654
mas não são as únicas.

57
00:03:41,654 --> 00:03:45,123
Você pode procurar por CSS Pseudo-classes
na internet pra saber mais

58
00:03:45,123 --> 00:03:47,474
ou esperar para aprender mais aqui.

59
00:03:47,474 --> 00:03:49,000
[Traduzido por Fernando dos Reis]
[Revisado por Pablo Vieira]