1
00:00:00,809 --> 00:00:05,432
Vamos mudar de rosquinhas para cenouras, 
um dos alimentos mais saudáveis do mundo.

2
00:00:05,432 --> 00:00:07,901
Além disso, o alimento favorito 
dos coelhos.

3
00:00:07,901 --> 00:00:10,534
Você sabia que cenouras não são só
da cor laranja?

4
00:00:10,534 --> 00:00:13,535
Elas eram originalmente roxas. 
Algumas delas ainda são.

5
00:00:13,535 --> 00:00:16,935
Temos esta página com uma lista de 
cores de cenoura

6
00:00:16,935 --> 00:00:19,835
e uma frase sobre suas origens roxas.

7
00:00:19,835 --> 00:00:25,267
E usamos classes para estilizar os nomes 
de cores para a cor apropriada.

8
00:00:25,267 --> 00:00:27,876
Gosto de como os estilos 
aparecem na lista,

9
00:00:27,876 --> 00:00:31,805
mas não tenho certeza se gosto de 
como o estilo "roxo" está no texto.

10
00:00:31,975 --> 00:00:36,365
Acho que prefiro não usar uma cor de 
fundo, e sim uma coloração mais sutil ali.

11
00:00:36,955 --> 00:00:40,560
Como poderia dizer ao navegador para 
estilizar o texto roxo aqui

12
00:00:40,560 --> 00:00:44,145
de forma diferente do que o texto 
roxo aqui?

13
00:00:44,145 --> 00:00:47,549
Eles têm os mesmos nomes de classe,
por isso não podemos usar a classe,

14
00:00:47,549 --> 00:00:49,563
a menos que criemos uma nova classe.

15
00:00:49,993 --> 00:00:52,919
Eles também têm a mesma tag: 
ambas são <i></i>.

16
00:00:53,269 --> 00:00:58,013
Não podemos usar o seletor <b>elemento</b>
mais <b>classe</b> que acabamos de aprender.

17
00:00:58,013 --> 00:01:00,383
Há mais alguma coisa diferente sobre eles?

18
00:01:01,173 --> 00:01:06,376
Uma coisa é que esta <i></i> está dentro 
de uma <i></i><i></i>,

19
00:01:06,376 --> 00:01:10,985
e esta <i></i> está dentro de uma <i></i><i></i>.

20
00:01:10,985 --> 00:01:15,583
A diferença é a tag pai delas, as
tags que estão acima delas.

21
00:01:15,583 --> 00:01:18,644
Podemos usar essa informação para fazer 
uma regra CSS,

22
00:01:18,644 --> 00:01:21,325
usando o que é chamado de 
um <b>seletor descendente</b>

23
00:01:21,325 --> 00:01:24,826
Uma forma de selecionar elementos com 
base na sua posição no documento.

24
00:01:25,216 --> 00:01:30,394
Por exemplo, para selecionar apenas o 
<i></i> roxo dentro do parágrafo

25
00:01:30,624 --> 00:01:35,776
vamos escrever <i>p</i>, e em seguida, um espaço.
O espaço é realmente importante

26
00:01:35,776 --> 00:01:40,381
e, em seguida, a classe <i>.purple</i>

27
00:01:40,381 --> 00:01:46,112
e agora vamos adicionar as propriedades 
que nos darão a coloração mais sutil.

28
00:01:46,112 --> 00:01:50,311
<i>background-color</i>: <i>transparent</i>, 
substitui o que era antes.

29
00:01:50,451 --> 00:01:51,453
Legal.

30
00:01:51,793 --> 00:01:58,735
Nós mudamos este texto roxo 
sem afetar também este texto roxo.

31
00:01:58,735 --> 00:02:02,879
E agora sempre que usarmos a classe 
<i>purple</i> dentro de um parágrafo como este,

32
00:02:02,879 --> 00:02:05,324
ele vai ter esses estilos aplicados nele.

33
00:02:06,044 --> 00:02:09,588
Podemos usar esse espaço para ir fundo 
em nosso documento.

34
00:02:09,588 --> 00:02:15,728
Digamos que queremos aplicar um estilo só 
para tags <i></i> que estão em <i></i><i></i>.

35
00:02:16,388 --> 00:02:22,893
Começamos com a tag pai <i></i><i></i> e depois 
espaço, e depois <i></i>.

36
00:02:23,323 --> 00:02:28,066
E talvez daremos uma altura de linha 
diferente para melhorar o espaçamento.

37
00:02:29,426 --> 00:02:34,073
Poderíamos até mesmo adicionar um 
<i></i><i></i> em frente ao <i></i><i></i>, se quiséssemos,

38
00:02:34,073 --> 00:02:38,525
para certificar que não seria aplicado às 
<i></i>'s dentro de um <i></i><i> </i><i></i>.

39
00:02:38,525 --> 00:02:40,790
Para usar seletores descendentes,

40
00:02:40,790 --> 00:02:43,575
precisamos pensar bem sobre a estrutura
do nosso documento

41
00:02:43,575 --> 00:02:46,102
e quais tags estão dentro de 
outras tags.

42
00:02:46,102 --> 00:02:49,512
Se você estiver indentando bem, 
então isso deve ser fácil de fazer

43
00:02:49,512 --> 00:02:52,508
porque o sua indentação refletirá a 
hierarquia das tags.

44
00:02:52,508 --> 00:02:56,955
Temos esta <i></i><i></i>, e indentado dentro 
dela temos um <i></i><i></i>,

45
00:02:56,955 --> 00:02:59,341
e no interior desta temos a <i></i>.

46
00:02:59,341 --> 00:03:02,926
Se não está indentando muito bem, 
arrume isso agora

47
00:03:02,926 --> 00:03:07,024
porque será muito mais fácil para você 
entender a estrutura de sua página

48
00:03:07,024 --> 00:03:10,099
e criar seletores CSS com 
base nessa estrutura.

49
00:03:10,609 --> 00:03:13,598
Você pode usar esse espaço entre 
quaisquer tipos de seletores.

50
00:03:13,968 --> 00:03:18,961
Como encontrar um tipo de tag especial 
sob um elemento que tem uma certa id,

51
00:03:18,961 --> 00:03:22,463
ou encontrar um id específico sob os 
elementos com uma classe particular,

52
00:03:22,463 --> 00:03:24,993
qualquer combinação que precise usar.

53
00:03:25,333 --> 00:03:29,433
O ponto para lembrar é: se a 
estrutura de sua página muda,

54
00:03:29,433 --> 00:03:32,843
suas regras CSS antigas podem 
não ser aplicáveis.

55
00:03:32,843 --> 00:03:37,185
Pense com cuidado quando usá-las, e quão 
à prova de mudanças será seu CSS.

56
00:03:37,185 --> 00:03:38,724
Você sempre pode usar classes

57
00:03:38,724 --> 00:03:41,543
se quiser ser menos dependente da 
estrutura da sua página.

58
00:03:41,703 --> 00:03:45,612
Vamos voltar para regras que criei 
e pensar sobre elas.

59
00:03:45,862 --> 00:03:49,051
Esta primeira regra estiliza todos os 
elementos com classe <i>purple</i>

60
00:03:49,051 --> 00:03:51,610
dentro de parágrafos de certo modo.

61
00:03:51,610 --> 00:03:55,387
Se eu adicionar novos parágrafos com 
elementos com classe <i>purple</i> no futuro,

62
00:03:55,387 --> 00:03:57,964
eu iria querer que tivessem essas 
propriedades?

63
00:03:57,964 --> 00:04:02,331
Sim, porque eu acho que elas sempre 
ficarão melhor no parágrafo.

64
00:04:02,331 --> 00:04:04,401
Preciso de uma regra mais específica?

65
00:04:04,401 --> 00:04:07,343
Talvez se estes parágrafos estivessem 
sempre dentro

66
00:04:07,343 --> 00:04:10,965
de algum elemento com uma classe "<i>artigo</i>",
eu poderia acrescentá-la na regra.

67
00:04:10,965 --> 00:04:14,249
Mas, por agora, este é o mais específico 
que posso ser.

68
00:04:14,249 --> 00:04:17,902
A segunda regra dá a todos os elementos 
<i></i>

69
00:04:17,902 --> 00:04:21,105
dentro de uma lista, uma certa altura de 
linha.

70
00:04:21,425 --> 00:04:24,269
Sempre vou querer que itens <i></i>
dentro de <i></i><i></i>

71
00:04:24,269 --> 00:04:26,233
tenham esse aumento na altura da linha?

72
00:04:27,393 --> 00:04:30,648
Talvez não. Esta regra pode ser 
muito genérica.

73
00:04:30,928 --> 00:04:36,778
Já que não tenho certeza, vou adicionar 
uma classe para esta <i></i><i></i>

74
00:04:36,778 --> 00:04:42,032
e depois, mudar este aqui para <i>ul.spacey</i>

75
00:04:42,352 --> 00:04:44,472
que a torna muito mais específica.

76
00:04:44,472 --> 00:04:46,751
No futuro, à medida que minha
página web cresce,

77
00:04:46,751 --> 00:04:50,160
eu poderia fazer a regra mais ou 
menos específica.

78
00:04:50,160 --> 00:04:53,630
Coloque esta ferramenta em sua sempre 
crescente caixa de ferramentas CSS

79
00:04:53,630 --> 00:04:56,590
e pratique, de modo que você possa
usá-la quando fizer sentido.

80
00:04:56,590 --> 00:04:58,000
[legendado por: Pablo Vieira]