Vamos mudar de rosquinhas para cenouras,
um dos alimentos mais saudáveis do mundo.
Além disso, o alimento favorito
dos coelhos.
Você sabia que cenouras não são só
da cor laranja?
Elas eram originalmente roxas.
Algumas delas ainda são.
Temos esta página com uma lista de
cores de cenoura
e uma frase sobre suas origens roxas.
E usamos classes para estilizar os nomes
de cores para a cor apropriada.
Gosto de como os estilos
aparecem na lista,
mas não tenho certeza se gosto de
como o estilo "roxo" está no texto.
Acho que prefiro não usar uma cor de
fundo, e sim uma coloração mais sutil ali.
Como poderia dizer ao navegador para
estilizar o texto roxo aqui
de forma diferente do que o texto
roxo aqui?
Eles têm os mesmos nomes de classe,
por isso não podemos usar a classe,
a menos que criemos uma nova classe.
Eles também têm a mesma tag:
ambas são .
Não podemos usar o seletor elemento
mais classe que acabamos de aprender.
Há mais alguma coisa diferente sobre eles?
Uma coisa é que esta está dentro
de uma ,
e esta está dentro de uma .
A diferença é a tag pai delas, as
tags que estão acima delas.
Podemos usar essa informação para fazer
uma regra CSS,
usando o que é chamado de
um seletor descendente
Uma forma de selecionar elementos com
base na sua posição no documento.
Por exemplo, para selecionar apenas o
roxo dentro do parágrafo
vamos escrever p, e em seguida, um espaço.
O espaço é realmente importante
e, em seguida, a classe .purple
e agora vamos adicionar as propriedades
que nos darão a coloração mais sutil.
background-color: transparent,
substitui o que era antes.
Legal.
Nós mudamos este texto roxo
sem afetar também este texto roxo.
E agora sempre que usarmos a classe
purple dentro de um parágrafo como este,
ele vai ter esses estilos aplicados nele.
Podemos usar esse espaço para ir fundo
em nosso documento.
Digamos que queremos aplicar um estilo só
para tags que estão em .
Começamos com a tag pai e depois
espaço, e depois .
E talvez daremos uma altura de linha
diferente para melhorar o espaçamento.
Poderíamos até mesmo adicionar um
em frente ao , se quiséssemos,
para certificar que não seria aplicado às
's dentro de um .
Para usar seletores descendentes,
precisamos pensar bem sobre a estrutura
do nosso documento
e quais tags estão dentro de
outras tags.
Se você estiver indentando bem,
então isso deve ser fácil de fazer
porque o sua indentação refletirá a
hierarquia das tags.
Temos esta , e indentado dentro
dela temos um ,
e no interior desta temos a .
Se não está indentando muito bem,
arrume isso agora
porque será muito mais fácil para você
entender a estrutura de sua página
e criar seletores CSS com
base nessa estrutura.
Você pode usar esse espaço entre
quaisquer tipos de seletores.
Como encontrar um tipo de tag especial
sob um elemento que tem uma certa id,
ou encontrar um id específico sob os
elementos com uma classe particular,
qualquer combinação que precise usar.
O ponto para lembrar é: se a
estrutura de sua página muda,
suas regras CSS antigas podem
não ser aplicáveis.
Pense com cuidado quando usá-las, e quão
à prova de mudanças será seu CSS.
Você sempre pode usar classes
se quiser ser menos dependente da
estrutura da sua página.
Vamos voltar para regras que criei
e pensar sobre elas.
Esta primeira regra estiliza todos os
elementos com classe purple
dentro de parágrafos de certo modo.
Se eu adicionar novos parágrafos com
elementos com classe purple no futuro,
eu iria querer que tivessem essas
propriedades?
Sim, porque eu acho que elas sempre
ficarão melhor no parágrafo.
Preciso de uma regra mais específica?
Talvez se estes parágrafos estivessem
sempre dentro
de algum elemento com uma classe "artigo",
eu poderia acrescentá-la na regra.
Mas, por agora, este é o mais específico
que posso ser.
A segunda regra dá a todos os elementos
dentro de uma lista, uma certa altura de
linha.
Sempre vou querer que itens
dentro de
tenham esse aumento na altura da linha?
Talvez não. Esta regra pode ser
muito genérica.
Já que não tenho certeza, vou adicionar
uma classe para esta
e depois, mudar este aqui para ul.spacey
que a torna muito mais específica.
No futuro, à medida que minha
página web cresce,
eu poderia fazer a regra mais ou
menos específica.
Coloque esta ferramenta em sua sempre
crescente caixa de ferramentas CSS
e pratique, de modo que você possa
usá-la quando fizer sentido.
[legendado por: Pablo Vieira]