WEBVTT
00:00:00.809 --> 00:00:05.432
Vamos mudar de rosquinhas para cenouras,
um dos alimentos mais saudáveis do mundo.
00:00:05.432 --> 00:00:07.901
Além disso, o alimento favorito
dos coelhos.
00:00:07.901 --> 00:00:10.534
Você sabia que cenouras não são só
da cor laranja?
00:00:10.534 --> 00:00:13.535
Elas eram originalmente roxas.
Algumas delas ainda são.
00:00:13.535 --> 00:00:16.935
Temos esta página com uma lista de
cores de cenoura
00:00:16.935 --> 00:00:19.835
e uma frase sobre suas origens roxas.
00:00:19.835 --> 00:00:25.267
E usamos classes para estilizar os nomes
de cores para a cor apropriada.
00:00:25.267 --> 00:00:27.876
Gosto de como os estilos
aparecem na lista,
00:00:27.876 --> 00:00:31.805
mas não tenho certeza se gosto de
como o estilo "roxo" está no texto.
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.
00:00:36.955 --> 00:00:40.560
Como poderia dizer ao navegador para
estilizar o texto roxo aqui
00:00:40.560 --> 00:00:44.145
de forma diferente do que o texto
roxo aqui?
00:00:44.145 --> 00:00:47.549
Eles têm os mesmos nomes de classe,
por isso não podemos usar a classe,
00:00:47.549 --> 00:00:49.563
a menos que criemos uma nova classe.
00:00:49.993 --> 00:00:52.919
Eles também têm a mesma tag:
ambas são .
00:00:53.269 --> 00:00:58.013
Não podemos usar o seletor elemento
mais classe que acabamos de aprender.
00:00:58.013 --> 00:01:00.383
Há mais alguma coisa diferente sobre eles?
00:01:01.173 --> 00:01:06.376
Uma coisa é que esta está dentro
de uma ,
00:01:06.376 --> 00:01:10.985
e esta está dentro de uma .
00:01:10.985 --> 00:01:15.583
A diferença é a tag pai delas, as
tags que estão acima delas.
00:01:15.583 --> 00:01:18.644
Podemos usar essa informação para fazer
uma regra CSS,
00:01:18.644 --> 00:01:21.325
usando o que é chamado de
um seletor descendente
00:01:21.325 --> 00:01:24.826
Uma forma de selecionar elementos com
base na sua posição no documento.
00:01:25.216 --> 00:01:30.394
Por exemplo, para selecionar apenas o
roxo dentro do parágrafo
00:01:30.624 --> 00:01:35.776
vamos escrever p, e em seguida, um espaço.
O espaço é realmente importante
00:01:35.776 --> 00:01:40.381
e, em seguida, a classe .purple
00:01:40.381 --> 00:01:46.112
e agora vamos adicionar as propriedades
que nos darão a coloração mais sutil.
00:01:46.112 --> 00:01:50.311
background-color: transparent,
substitui o que era antes.
00:01:50.451 --> 00:01:51.453
Legal.
00:01:51.793 --> 00:01:58.735
Nós mudamos este texto roxo
sem afetar também este texto roxo.
00:01:58.735 --> 00:02:02.879
E agora sempre que usarmos a classe
purple dentro de um parágrafo como este,
00:02:02.879 --> 00:02:05.324
ele vai ter esses estilos aplicados nele.
00:02:06.044 --> 00:02:09.588
Podemos usar esse espaço para ir fundo
em nosso documento.
00:02:09.588 --> 00:02:15.728
Digamos que queremos aplicar um estilo só
para tags que estão em .
00:02:16.388 --> 00:02:22.893
Começamos com a tag pai e depois
espaço, e depois .
00:02:23.323 --> 00:02:28.066
E talvez daremos uma altura de linha
diferente para melhorar o espaçamento.
00:02:29.426 --> 00:02:34.073
Poderíamos até mesmo adicionar um
em frente ao , se quiséssemos,
00:02:34.073 --> 00:02:38.525
para certificar que não seria aplicado às
's dentro de um .
00:02:38.525 --> 00:02:40.790
Para usar seletores descendentes,
00:02:40.790 --> 00:02:43.575
precisamos pensar bem sobre a estrutura
do nosso documento
00:02:43.575 --> 00:02:46.102
e quais tags estão dentro de
outras tags.
00:02:46.102 --> 00:02:49.512
Se você estiver indentando bem,
então isso deve ser fácil de fazer
00:02:49.512 --> 00:02:52.508
porque o sua indentação refletirá a
hierarquia das tags.
00:02:52.508 --> 00:02:56.955
Temos esta , e indentado dentro
dela temos um ,
00:02:56.955 --> 00:02:59.341
e no interior desta temos a .
00:02:59.341 --> 00:03:02.926
Se não está indentando muito bem,
arrume isso agora
00:03:02.926 --> 00:03:07.024
porque será muito mais fácil para você
entender a estrutura de sua página
00:03:07.024 --> 00:03:10.099
e criar seletores CSS com
base nessa estrutura.
00:03:10.609 --> 00:03:13.598
Você pode usar esse espaço entre
quaisquer tipos de seletores.
00:03:13.968 --> 00:03:18.961
Como encontrar um tipo de tag especial
sob um elemento que tem uma certa id,
00:03:18.961 --> 00:03:22.463
ou encontrar um id específico sob os
elementos com uma classe particular,
00:03:22.463 --> 00:03:24.993
qualquer combinação que precise usar.
00:03:25.333 --> 00:03:29.433
O ponto para lembrar é: se a
estrutura de sua página muda,
00:03:29.433 --> 00:03:32.843
suas regras CSS antigas podem
não ser aplicáveis.
00:03:32.843 --> 00:03:37.185
Pense com cuidado quando usá-las, e quão
à prova de mudanças será seu CSS.
00:03:37.185 --> 00:03:38.724
Você sempre pode usar classes
00:03:38.724 --> 00:03:41.543
se quiser ser menos dependente da
estrutura da sua página.
00:03:41.703 --> 00:03:45.612
Vamos voltar para regras que criei
e pensar sobre elas.
00:03:45.862 --> 00:03:49.051
Esta primeira regra estiliza todos os
elementos com classe purple
00:03:49.051 --> 00:03:51.610
dentro de parágrafos de certo modo.
00:03:51.610 --> 00:03:55.387
Se eu adicionar novos parágrafos com
elementos com classe purple no futuro,
00:03:55.387 --> 00:03:57.964
eu iria querer que tivessem essas
propriedades?
00:03:57.964 --> 00:04:02.331
Sim, porque eu acho que elas sempre
ficarão melhor no parágrafo.
00:04:02.331 --> 00:04:04.401
Preciso de uma regra mais específica?
00:04:04.401 --> 00:04:07.343
Talvez se estes parágrafos estivessem
sempre dentro
00:04:07.343 --> 00:04:10.965
de algum elemento com uma classe "artigo",
eu poderia acrescentá-la na regra.
00:04:10.965 --> 00:04:14.249
Mas, por agora, este é o mais específico
que posso ser.
00:04:14.249 --> 00:04:17.902
A segunda regra dá a todos os elementos
00:04:17.902 --> 00:04:21.105
dentro de uma lista, uma certa altura de
linha.
00:04:21.425 --> 00:04:24.269
Sempre vou querer que itens
dentro de
00:04:24.269 --> 00:04:26.233
tenham esse aumento na altura da linha?
00:04:27.393 --> 00:04:30.648
Talvez não. Esta regra pode ser
muito genérica.
00:04:30.928 --> 00:04:36.778
Já que não tenho certeza, vou adicionar
uma classe para esta
00:04:36.778 --> 00:04:42.032
e depois, mudar este aqui para ul.spacey
00:04:42.352 --> 00:04:44.472
que a torna muito mais específica.
00:04:44.472 --> 00:04:46.751
No futuro, à medida que minha
página web cresce,
00:04:46.751 --> 00:04:50.160
eu poderia fazer a regra mais ou
menos específica.
00:04:50.160 --> 00:04:53.630
Coloque esta ferramenta em sua sempre
crescente caixa de ferramentas CSS
00:04:53.630 --> 00:04:56.590
e pratique, de modo que você possa
usá-la quando fizer sentido.
00:04:56.590 --> 00:04:58.000
[legendado por: Pablo Vieira]