Estamos de volta com nossa página sobre rosquinhas e os perigos de comê-las.
Gostei da classe warning que adicionamos às tags e .
Mas quero que o aviso se destaque ainda mais.
Conseguimos essa borda cinza, da classe CSS "fact".
Mas ficaria melhor com uma borda laranja mais larga.
Vamos tentar colocar isso na classe CSS "warning".
Então: border, 5 px, solid, orange.
Adorei! Mas apareceu também na tag
e não ficou tão bem junto com o texto.
Quero que apareça apenas no parágrafo que usa "warning",
e não em avisos dentro do texto.
Como posso tornar as regras CSS mais específicas?
Uma maneira é fazer uma nova classe "warning-paragraph"
e mover as propriedades para ela. Mas não temos que fazer isso.
Podemos dizer ao navegador para aplicar a borda só em parágrafos que usam "warning",
mas não em outras tags que usam "warning".
Para fazer isso, primeiro escrevemos o elemento escolhido "p"
então colocamos um ponto, seguido do nome da classe.
Isso faz o navegador encontrar todos os que usam a classe "warning"
e aplicar as propriedades dessa classe neles.
Então vamos colar a propriedade da borda aqui...
e voila! Temos a borda na classe fact mas não em .
Podemos fazer qualquer combinação de elementos e classes,
para forçar o navegador a aplicar o estilo só em tags que usem uma classe.
Certifique-se de seguir exatamente a sequência:
nome da tag, o ponto, e então o nome da classe.
Se colocar acidentalmente, um espaço entre a tag e o ponto, não funcionará mais.
Porque espaço significa outra coisa em CSS
e o navegador interpretará essa regra de forma diferente.
Fique ligado, para descobrir mais sobre o significado do espaço.