-
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.
