< Return to Video

Combinando classes CSS e seletores de elementos

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

more » « less
Video Language:
English
Duration:
02:08

Portuguese, Brazilian subtitles

Revisions