Nós conseguimos fazer muito até agora com os seletores que vimos em CSS:
selecionando elementos pelo nome da tag, pelo ID e pelo nome da classe.
Vamos revisá-los por um segundo nessa página da web.
Essa página da web tem tudo sobre donuts.
E tem um título, parágrafos...
e alguns dos parágrafos são fatos com menos de uma linha.
O CSS começa com a regra de selecionar toda a tag '' da página,
e dá a eles a fonte sans-serif.
Vou mudar para fonte "monospace", para que você veja tudo que é selecionado.
está vendo?
A próxima regra seleciona qualquer elemento que tenha a ID 'donut-header'.
E sabemos que está escolhendo pela ID, pois começa com o símbolo '#'.
Já que a ID é bem descritiva,
me parece estar selecionando o título maior no topo
e mudando sua fonte.
Mas vou apenas confirmar que '' tem a ID.
sim, aqui está.
A última regra seleciona todos os elementos que tem a classe 'fact'.
E sabemos que procura por uma classe, pois começa com um ponto.
Para saber quais elementos possuem essa classe,
eu posso olhar o que a regra está fazendo--
adicionando uma borda no topo e no final e colchetes--
ou eu posso através de meu HTML pelo nome da classe.
Posso ver que o nome da classe está neste parágrafo
e nesse parágrafo...
nos dois parágrafos com fatos de uma linha
e é por isso que eles tem a borda.
classes são incríveis,
pois eles nos deixam usar o mesmo estilo através de múltiplos elementos.
Mas ainda podemos fazer mais com as classes,
e é isso que irei mostrar agora.
Então, temos a página sobre donuts,
mas donuts não são nada saudáveis para você.
Eles podem ser uma das coisas menos saudáveis para você.
E são meio que viciantes, por causa do açúcar.
Então se teremos uma página falando sobre eles,
devemos alertar as pessoas a respeito de seus malefícios.
Que tal se fizermos esse fato em vermelho, para mostrar que é um aviso?
Como faremos isso?
Começamos adicionando a propriedade 'color' na regra 'fact' do CSS,
e vamos ver o que isso faz.
Mas faz com que ambos os fatos fiquem vermelhos, e o segundo não é um aviso.
É apenas algo de ortografia.
Então não queremos que fique vermelho.
Podemos adicionar uma ID,
mas então se quisermos por uma cor a outras coisas que eram avisos depois
e adicionar mais avisos,
então teríamos que continuar adicionando ID's e regras para essas IDs.
Em um caso como esse, a melhor coisa a fazer é adicionar outra classe a tag ''.
Navegadores nos deixam adicionar quantas classes quisermos para uma única tag.
Para isso, colocamos o cursor depois da última classe,
Damos um espaço, e escrevemos uma nova classe, como 'warning'.
Agora podemos fazer uma regra para 'warning'.
e mover a propriedade 'color' para dentro da regra.
Agora o fato em cima está vermelho, e o segundo não está.
Lindo.
Podemos por a classe em outros elementos, como antes.
Talvez queiramos colorir o texto em negrito, "deep fried"...
nós o queremos de vermelho, pois, coisas fritas
são muitas vezes ligadas a não estar bem.
Então adicionamos 'class="warning" '...
também vermelho.
Note que esse aviso aqui tem a cor vermelha,
e que também tem a 'border:top' e 'border:bottom' .
É isso que ocorre quando se usam múltiplas classes...
o navegador vai olhar todas as regras que se aplicam a elas
e aplicar todos os estilos apropriados.
Devemos tomar cuidado com usar apenas cores para expressar significados,
pois alguma pessoas não as enxergam.
Existem pessoas que mal podem dizer a diferença
entre vermelho e preto e talvez você seja uma delas.
Então vamos mudar nossa classe para ficar mais visível para todos.
Vamos mudar essa cor para 'background color'.
Pois qualquer um pode dizer qual algo tem um plano de fundo.
Esse é um contraste muito pequeno, o vermelho e preto.
E contraste também é importante para tornar a leitura da página melhor.
Então, vamos deixar a cor branca.
Ok, agora temos grandes contrastes,
e um fundo vermelho para pessoas que podem ver vermelho.
e já que usamos uma classe, ambos os avisos estão com o mesmo estilo.
Graças a flexibilidade das classes do CSS,
podemos salvar o mundo inteiro dos donuts.
Traduzido por [Alef Almeida] Revisado por [Gabriel Mello Fernandes]