Classes vs ids
Um id e uma classe podem mirar o mesmo elemento, mas eles não pesam igual na disputa de especificidade.
Estudar esta lição interativa →Você já viu, no curso de HTML, que id deve ser único na página e class pode se repetir em vários elementos. Em CSS, essa diferença também aparece na força de cada seletor: um seletor de id (#exemplo) é mais específico, e vence, um seletor de class (.exemplo), que por sua vez vence um seletor de tag simples (p, div).
Pense numa carta endereçada de três formas: "para qualquer morador do Brasil" (tag), "para qualquer morador da Rua das Flores" (classe) e "para João Silva, número 42, Rua das Flores" (id). Quanto mais específico o endereço, menos gente ele atinge, mas mais "peso" ele carrega quando o assunto é decidir para quem uma instrução vale.
O pódio mostra a ordem de força: tag, classe, id. Cada degrau tem a sua coluna na conta (ids, classes, tags), e a comparação vai da esquerda para a direita: nenhuma quantidade de classes vence um id, porque a coluna dos ids vem primeiro.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. id vence classe, que vence tag, mesmo que a regra de id venha primeiro no código.
Como a conta funciona de verdade: o navegador conta três colunas, na ordem (ids, classes, tags), e compara da esquerda para a direita. #menu .item a vale (1, 1, 1) e .a.b.c vale (0, 3, 0): o primeiro vence, porque tem um id, e não importa quantas classes o segundo junte. Por isso o desenho do pódio é só uma imagem da ordem, não uma soma em base 10.
Na prática, a maior parte do CSS de um projeto real é escrita com classes, não ids: elas são reaproveitáveis (o mesmo .card estiliza vinte cartões diferentes) e têm uma especificidade previsível, nem baixa demais nem alta demais. Ids costumam ficar reservados para casos únicos na página, como âncoras de navegação (id="contato"), mais do que para estilo visual.
Abusar de ids (ou empilhar seletores muito específicos, como div#pagina .conteudo .card p) cria um CSS difícil de sobrescrever depois: qualquer ajuste futuro precisa ser ainda mais específico para vencer. Prefira manter a especificidade baixa e consistente (principalmente com classes), reservando ids para exceções pontuais.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Faça a regra de id vencer.