Curso de CSS / Seletores básicos: tipo, classe, ID e atributos

Seletores CSS identificam os elementos HTML aos quais uma regra se aplica. Seletores de tipo correspondem a nomes de tags, seletores de classe correspondem a rótulos reutilizáveis, seletores de ID correspondem a um identificador, e seletores de atributo correspondem a atributos ou seus valores.

Compare seletores com o mesmo HTML

Vamos ler o seletor com base nos seguintes quatro itens: A e B são p e possuem a classe notice, e B também possui a classe urgent. C é um p sem classe, D é um div com a classe notice. As letras inglesas A~D são apenas marcas para distinguir os objetos na descrição e não são sintaxe CSS.

<p id="opening" class="notice" data-tags="garden visit">A: Operating hours</p>
<p class="notice urgent">B: Rainy weather notice</p>
<p>C: What you need</p>
<div class="notice">D: Information box</div>

Ao ler um seletor, certifique-se de que a condição esteja no próprio elemento ao qual o CSS será aplicado. As duas condições em p.notice referem-se ao mesmo elemento. Por outro lado, o espaço em p .notice significa encontrar outro elemento dentro de p. Regras que mudam o alvo dependendo do espaço podem ser encontradas junto com a estrutura em Combinadores e pseudoclasses CSS.

Use seletores de tipo e universais

p { color: #333; }
* { box-sizing: border-box; }

p seleciona todos os elementos p. É simples decorar a mesma tag em comum, mas para decorar os parágrafos de aviso e do corpo separadamente, são necessárias condições adicionais como classe. O seletor universal * é uma notação que seleciona todos os elementos. Ele não inclui automaticamente pseudo-elementos.

Aqui, box-sizing: border-box é uma configuração auxiliar que calcula incluindo o padding e a borda ao especificar a largura e a altura. Você pode fazer este exercício mesmo que ainda não tenha aprendido todos os detalhes de cálculos de tamanho. Usar um seletor universal não significa que você precisa mudar todas as cores de texto e fundos de uma vez. Pense no design de configurações comuns e elementos específicos.

Selecione classes e IDs

.notice { background-color: #e9f7ef; }
p.notice { border-left: 4px solid #087f5b; }
.notice.urgent { font-weight: bold; }
#opening { color: #087f5b; }

Uma classe pode ser reutilizada para múltiplos elementos. class="notice urgent" em HTML é uma lista de dois nomes de classes separados por espaços, não um único nome notice urgent. Em CSS, adicione um ponto na frente para selecionar .notice ou .urgent. .notice.urgent aplica-se apenas a elementos com ambos os nomes.

Um ID deve ser único dentro de um documento HTML. Não dê dez avisos com o mesmo id="opening". Use classes para estilos reutilizáveis e IDs para identificação única ou destinos de fragmentos. Seletores de ID têm especificidade maior do que seletores de classe, mas a especificidade é comparada dentro das condições de origem aplicáveis, importância e camada; adicionar IDs indiscriminadamente torna conflitos mais difíceis de manter. Para mais detalhes, veja Herança, especificidade e cascata do CSS.

No exemplo, colorimos por ID para mostrar as diferenças entre os assuntos. Se você realmente precisar da mesma cor verde para vários avisos, pode simplificar adicionando a cor à regra .notice. O objetivo é escolher o conjunto necessário de elementos, sem tentar usar todos os tipos de seletores.

Combinar atributos e seus valores

input[required] { border: 2px solid #087f5b; }
input[type="email"] { background-color: #fff4cc; }
[data-tags~="visit"] { outline: 1px dashed #777; }
a[href^="https://"] { color: #1d4ed8; }

Um endereço https:// pode apontar para o mesmo site, então esse prefixo não identifica links externos por si só. Da mesma forma, [data-tags="visit"] corresponde ao valor completo do atributo e não corresponde a garden visit. Use o operador de comparação apropriado para a condição desejada. Veja MDN: Seletores de atributo.

Execute o exemplo completo do seletor

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
* { box-sizing: border-box; }
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    p { color: #333; }
    .notice { background-color: #e9f7ef; padding: 12px; }
    p.notice { border-left: 4px solid #087f5b; }
    .notice.urgent { font-weight: bold; }
    #opening { color: #087f5b; }
    [data-tags~="visit"] { outline: 1px dashed #777; }
    a[href^="https://"] { color: #1d4ed8; }
    input[required] { border: 2px solid #087f5b; }
    input[type="email"] { background-color: #fff4cc; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p id="opening" class="notice" data-tags="garden visit">A: We open at 9am every day.</p>
  <p class="notice urgent">B: In case of rain, the outdoor program will be canceled.</p>
  <p>C: Bring a water bottle and comfortable shoes.</p>
  <div class="notice">D: This is an information box.</div>
  <p><a href="https://example.com/">E: External guidance link</a></p>
  <form>
    <label for="email">Email (required)</label>
    <input id="email" type="email" name="email" required>
    <button type="submit">Request information</button>
  </form>
</body>
</html>

Se você salvar e abrir com index.html, A·B·D terá um fundo claro e padding de 12px, e apenas A·B correspondente a p.notice terá uma borda esquerda. B possui ambas as classes e parece em negrito. A tem o ID opening e fica verde, e um contorno pontilhado também é criado devido ao palavra visit no atributo data-tags. C permanece um parágrafo normal.

A borda do campo de e-mail fica mais espessa por causa do atributo required, e o fundo fica amarelo por causa de type="email". A validação do preenchimento obrigatório é feita pelo atributo HTML required; o CSS apenas altera a aparência do campo. O endereço de link externo no exemplo é apenas para fins ilustrativos. Por favor, não use isso como link de guia para o serviço real. A forma de selecionar a existência de um atributo é diferente da forma de selecionar o resultado da verificação. Estados de formulários: foco, validação, disabled e readonly compara a presença de required e os estados de erro.

Altere as condições e preveja o resultado

1. Tente mudar p.notice para .notice para ampliar o alvo da borda esquerda. O resultado esperado é que a borda que originalmente existia apenas em A·B também apareça em D. Após a confirmação, retorne ao seletor original.
2. Mude a classe de B para class="urgent". B ainda é p, mas deixa de ter a classe notice, então o fundo do guia, a borda esquerda e o texto em negrito de .notice.urgent desaparecem. Seletores complexos não correspondem apenas por causa da classe urgent.
3. Altere o valor de data-tags de A para garden revisit. Como não há a palavra independente visit, o contorno pontilhado deve desaparecer. Certifique-se de não confundir visit e revisit como substrings.

Para cada exercício, salve o arquivo e depois atualize para verificar e retornar aos valores originais. Se apenas o objeto esperado não mudar, compare primeiro o classe, ID e atributo reais. Você pode distinguir entre erros de seleção e conflitos de prioridade olhando nas ferramentas de desenvolvedor para ver se as regras correspondem aos elementos selecionados.