Class e ID no CSS: qual a diferença e quando usar cada um

Quando você começa a escrever CSS, a primeira forma de estilizar é pelo nome da tag: p { color: red; } pinta todos os parágrafos. Funciona até o dia em que você precisa que só um parágrafo fique vermelho, ou só os cards em promoção ganhem uma borda diferente. É aí que entram os dois atributos mais usados do CSS: class e id.

Neste artigo você vai entender a diferença entre class e ID, como escrever cada um no HTML e no CSS, qual deles tem mais força quando os dois disputam o mesmo elemento e — o mais importante — quando usar cada um.

Por que precisamos de class e ID?

Imagine o cardápio de uma cafeteria com vários itens. Todos são cards iguais, mas alguns estão em destaque, outros esgotados, e existe uma única promoção do dia no topo. Se o CSS só conseguisse selecionar tags, todos os <div> seriam iguais. Class e ID são etiquetas que colocamos nos elementos para o CSS saber exatamente em quem mexer.

Class: estilo para um grupo de elementos

No HTML, você adiciona o atributo class com o nome que quiser. No CSS, seleciona a classe com um ponto antes do nome:

<div class="card">Espresso</div>
<div class="card">Cappuccino</div>
<div class="card">Pão de queijo</div>

.card {
  background: #fff;
  border: 2px solid #d4a373;
  border-radius: 10px;
  padding: 16px;
}

Uma única regra estiliza os três cards. Se amanhã entrar um quarto item no cardápio, basta colocar class="card" nele e o visual vem junto, sem escrever uma linha de CSS a mais.

Um elemento pode ter várias classes

Esse é o superpoder das classes: você pode combinar várias no mesmo elemento, separadas por espaço. Cada classe traz uma parte do estilo, como peças de Lego.

<div class="card destaque">Cappuccino</div>
<div class="card esgotado">Bolo de cenoura</div>

.destaque {
  border-color: #C4262E;
  background: #fff4f4;
}

.esgotado {
  opacity: 0.5;
}

ID: identidade única na página

O ID usa o atributo id no HTML e, no CSS, é selecionado com uma cerquilha (#) antes do nome:

<div id="promo-do-dia">
  Cappuccino + pão de queijo por R$ 12,00
</div>

#promo-do-dia {
  background: #6f4e37;
  color: #fff;
  text-align: center;
}

A regra de ouro: um ID não pode se repetir na mesma página. O navegador até desenha a página se você repetir, mas o HTML fica inválido e tudo que depende daquele ID começa a falhar, principalmente links e JavaScript. Também não existe “vários IDs” em um elemento: cada elemento tem no máximo um.

Para que o ID serve de verdade

Na prática, o ID brilha em funções que exigem um elemento único, mais do que na estilização:

• Âncoras de navegação: um link <a href="#contato"> rola a página até o elemento com id="contato".
• Formulários: o <label for="email"> se conecta ao <input id="email">. Clicar no texto do rótulo seleciona o campo.
• JavaScript: document.getElementById("promo-do-dia") encontra aquele elemento específico para manipular.

<nav>
  <a href="#cardapio">Cardápio</a>
  <a href="#contato">Contato</a>
</nav>

<section id="cardapio"> ... </section>
<section id="contato"> ... </section>

Vendo tudo junto

Aqui está o cardápio completo, usando classe para o que se repete e ID para o que é único:

<div class="card" id="promo-do-dia">
  <h4>Promoção do dia</h4>
  <p>Cappuccino + pão de queijo por R$ 12,00</p>
</div>

<div class="card">
  <h4>Espresso</h4>
  <p>Café curto e intenso. R$ 6,00</p>
</div>

<div class="card destaque">
  <h4>Cappuccino</h4>
  <p>O mais pedido da casa. R$ 9,50</p>
</div>

<div class="card esgotado">
  <h4>Bolo de cenoura</h4>
  <p>Volta amanhã! R$ 7,00</p>
</div>

O resultado:

Repare que a promoção tem classe e ID ao mesmo tempo. Isso é permitido e comum: ela herda o visual básico de .card e o ID sobrescreve só o que precisa ser diferente.

Quem vence: tag, class ou ID?

Quando duas regras tentam mudar a mesma propriedade de um elemento, o navegador olha a especificidade de cada seletor, ou seja, o quanto ele é “específico”. Quanto mais preciso o seletor, mais força ele tem:

Veja na prática. Qual será a cor do texto?

<p id="aviso" class="texto">Qual é a minha cor?</p>

#aviso  { color: red; }
.texto  { color: blue; }
p       { color: green; }

Resposta: vermelho. Não importa a ordem em que as regras aparecem no arquivo: o ID é mais específico que a classe, que é mais específica que a tag. A ordem só decide o empate, quando dois seletores têm a mesma força.

Regras para dar nome a classes e IDs

• Nada de espaços. Em classes, o espaço separa duas classes diferentes; em IDs, é inválido. Use hífen: promo-do-dia.
• Não comece com número. .3colunas não funciona no CSS; prefira .colunas-3.
• Maiúsculas e minúsculas fazem diferença. .Card e .card são classes diferentes. Padronize tudo em minúsculas.
• Evite acentos e caracteres especiais. Escreva cardapio em vez de cardápio.
• Nomeie pelo significado, não pela aparência. .destaque continua fazendo sentido se a cor mudar de vermelho para verde; .texto-vermelho não.

Os erros mais comuns

Resumo rápido

Se ficar em dúvida, faça uma pergunta: “isso pode aparecer mais de uma vez na página?” Se a resposta for sim, ou mesmo “talvez”, use classe.

Desafio para praticar

Monte um cardápio com seis itens usando a classe .card. Depois:

1. Crie as classes .destaque e .esgotado e aplique cada uma em dois itens diferentes.
2. Coloque um item com as duas classes ao mesmo tempo e observe como os estilos se combinam.
3. Adicione no topo uma seção com id="promo-do-dia" e, no menu, um link <a href="#promo-do-dia"> que leve até ela.
4. Por último, escreva #promo-do-dia { color: red; } e .card { color: blue; }, aplique os dois no mesmo elemento e explique por que a cor final foi aquela.

Washington Paiva — instrutor de Desenvolvimento de Sistemas · washington.pro.br