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]