CSS id e class
Use o seletor CSS ID para identificar um elemento HTML e estilizá-lo com CSS. Para múltiplos elementos, use o seletor de class. Veja exemplos.
No capítulo anterior, aprendemos sobre seletores. Agora vamos falar sobre os seletores id e class, que são os dois seletores baseados em atributos que você mais vai usar ao estilizar uma página web.
Este capítulo aborda o que cada seletor faz, como escrevê-lo, como eles diferem e — igualmente importante — quando escolher um em vez do outro.
Seletor CSS id
Um seletor id tem como alvo o único elemento HTML cujo atributo id corresponde ao nome fornecido. Como um id deve ser único dentro de uma página, um seletor id serve para estilizar um elemento específico, não um grupo deles.
Tanto em folhas de estilo internas quanto externas, você escreve um seletor id com um hash (#) seguido do valor do id: #name { ... }.
Exemplo de um seletor ID:
Seletor CSS ID para Elemento HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Aqui demos ao segundo parágrafo o id blue (id="blue") e declaramos seu estilo com a propriedade color — #blue { color: #1c87c9; } — dentro da seção <head>. Apenas aquele elemento é correspondido, portanto somente o segundo parágrafo fica azul; o primeiro e o terceiro mantêm sua cor padrão.
Um valor de id não pode conter espaços e, por convenção, não deve começar com um dígito. Abra o exemplo no editor para confirmar que apenas o segundo parágrafo está em #1c87c9.
Seletor CSS class
Um seletor class tem como alvo todo elemento cujo atributo class contém o nome fornecido. Use-o quando o mesmo estilo deve ser aplicado a múltiplos elementos — por exemplo, um estilo .warning compartilhado por vários avisos, ou um estilo .btn reutilizado em muitos botões.
Tanto em folhas de estilo internas quanto externas, você escreve um seletor class com um ponto (.) seguido do nome da class: .name { ... }.
Exemplo de um seletor class:
Exemplo de Seletor CSS Class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>Aqui a mesma class blue é aplicada a dois elementos diferentes — um cabeçalho e um parágrafo (class="blue") — e estilizada uma única vez com .blue { color: #1c87c9; }. Tanto o cabeçalho quanto o terceiro parágrafo ficam em #1c87c9, enquanto o parágrafo do meio (que não tem class) não é afetado. Definir a regra uma vez e reutilizá-la é exatamente para isso que as classes servem.
Múltiplas classes em um elemento
Um elemento pode ter várias classes ao mesmo tempo. Liste-as no atributo class separadas por espaços, e toda regra correspondente será aplicada:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
font-size: 20px;
}
.highlight {
background-color: #ffe69e;
}
</style>
</head>
<body>
<p class="text highlight">This paragraph is both larger and highlighted.</p>
</body>
</html>Essa capacidade de composição é o motivo pelo qual as classes são o recurso mais usado do CSS: classes pequenas e com propósito único podem ser combinadas em toda a página.
A diferença entre id e class
A distinção principal é a unicidade:
- Um id é único — cada elemento pode ter apenas um id, e cada página deve conter apenas um elemento com determinado id. Reutilizar o mesmo id em vários elementos é HTML inválido e pode quebrar scripts e recursos de acessibilidade que esperam que os ids sejam únicos.
- Uma class é reutilizável — a mesma class pode aparecer em muitos elementos, e um único elemento pode ter muitas classes.
| id | class | |
|---|---|---|
| Símbolo em CSS | # | . |
| Vezes por página | uma vez | ilimitado |
| Por elemento | um id | muitas classes |
| Uso típico | um elemento único (ex.: cabeçalho da página, alvo de âncora) | estilização repetida, componentes |
Os ids também têm mais peso na cascata do que as classes. Quando uma regra id e uma regra class têm como alvo o mesmo elemento, a regra id vence independentemente da ordem de declaração — veja especificidade CSS através de seletores. Esse peso extra é um motivo pelo qual muitos guias de estilo preferem classes para estilização e reservam ids para links internos da página (href="#section") e ganchos JavaScript.
Qual devo usar?
Na prática, use classes para estilização. Elas são reutilizáveis, fáceis de sobrescrever e mantêm a especificidade baixa e previsível. Recorra a um id apenas quando você genuinamente precisar de um identificador único para um elemento — para links de fragmento, associações label/for em formulários ou getElementById em JavaScript.