Docs executáveis de CSS: Seletor de classe

Q: Como selecionar uma classe no CSS?

Escreva um ponto seguido do nome da classe: .card { ... } estiliza todo elemento com class="card". O ponto só existe no CSS; o atributo no HTML não tem ponto.

Q: Como dar duas classes a um elemento?

Separe os nomes com espaço em um único atributo: class="btn primary". Escrever class duas vezes no elemento não funciona; o navegador fica só com o primeiro atributo.

Q: Como selecionar um elemento que tem duas classes?

Encadeie os seletores de classe sem espaço: .btn.primary seleciona elementos que têm as duas classes. Com espaço, .btn .primary significa um elemento .primary dentro de um elemento .btn.

O seletor de classe

Um seletor de classe é um ponto seguido do nome de uma classe. Ele estiliza todo elemento cujo atributo class contém esse nome, seja qual for o tipo do elemento.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

O ponto aparece só no CSS. No HTML o atributo é class="badge", sem ponto. Nomes de classe diferenciam maiúsculas de minúsculas: .Badge não seleciona class="badge".

Várias classes em um elemento

Um elemento pode ter quantas classes quiser, separadas por espaços. Cada uma traz as próprias regras, e é assim que você monta variantes a partir de peças pequenas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger, sem espaço, seleciona elementos que têm as duas classes. O último span tem danger mas não tem btn, então a regra encadeada o ignora.

Variações do seletor de classe

Seletor	Seleciona
`.note`	Qualquer elemento com a classe `note`
`p.note`	Só elementos `<p>` com a classe `note`
`.btn.primary`	Elementos com `btn` e `primary`
`.card .title`	Um `.title` em qualquer lugar dentro de um `.card`
`.card > .title`	Um `.title` cujo pai é um `.card`
`.a, .b`	Elementos com `a` ou `b`

A diferença entre ter e não ter espaço, junto com outros combinadores, está na página de seletores CSS.

O seletor de ID

Um seletor de ID é um hash seguido do id: #site-header estiliza o elemento com id="site-header". Um id precisa ser único na página, então um seletor de ID mira exatamente um elemento.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Os ids fazem mais do que estilizar: href="#details" rola até o elemento, <label for="email"> aponta para o id de um input e o JavaScript o encontra com document.getElementById('details'). Esse é o motivo comum para dar um id a um elemento; para estilizar, a classe é a ferramenta melhor.

Classe vs ID

	Classe `.name`	ID `#name`
Por página	Muitos elementos	Um elemento
Por elemento	Várias, separadas por espaço	Um
Especificidade	(0,1,0)	(1,0,0)
Alvo de link (`#name` na URL)	Não	Sim
Melhor para	Estilizar	Âncoras, labels, ganchos de JavaScript

A diferença de especificidade é o motivo prático para estilizar com classes. Um ID vence qualquer quantidade de classes, então uma regra escrita com ID só pode ser sobrescrita por outro ID, por um estilo inline ou por !important:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

Adicionar e remover classes com JavaScript

As classes são o jeito normal de o JavaScript mudar a aparência de algo: o CSS define os estados, o script só alterna entre eles.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList também tem add, remove, contains e replace. Evite atribuir className diretamente: isso substitui todas as classes que o elemento tinha.

Como nomear classes

Letras, dígitos, hífens e underscores são seguros: card, card-title, card__title, is-open.
Não comece um seletor com um dígito, nem com um hífen seguido de dígito. .2col é CSS inválido. Comece com uma letra (.cols-2) ou faça o escape do dígito (.\32 col).
Dê nomes pela função, não pela aparência: .error sobrevive a um redesign, .red-text não.
Uma convenção de nomes ajuda em projetos maiores. O BEM escreve block__element--modifier, por exemplo .card__title--large.

Erros comuns

Colocar o ponto no HTML. class=".badge" nunca combina com .badge.
Dois atributos class. <p class="a" class="b"> fica só com a. Use class="a b".
Um espaço quando você queria as duas classes. .btn .primary procura um elemento aninhado; .btn.primary é o mesmo elemento.
Repetir um id. Ids duplicados quebram getElementById, links de âncora e a associação de labels, mesmo que o CSS pareça funcionar.
Estilizar tudo com ids. A especificidade deles torna as sobrescritas futuras penosas; use classes.

Perguntas frequentes

Como selecionar uma classe no CSS?

Escreva um ponto seguido do nome da classe: .card { ... } estiliza todo elemento com class="card". O ponto só existe no CSS; o atributo no HTML não tem ponto.

Qual a diferença entre class e id no CSS?

Uma classe pode ser usada em quantos elementos você quiser, e um elemento pode ter várias; um id precisa ser único na página, e um elemento tem no máximo um. No CSS, #id tem especificidade bem maior que .class, então regras com ID são mais difíceis de sobrescrever.

Como dar duas classes a um elemento?

Separe os nomes com espaço em um único atributo: class="btn primary". Escrever class duas vezes no elemento não funciona; o navegador fica só com o primeiro atributo.

Como selecionar um elemento que tem duas classes?

Encadeie os seletores de classe sem espaço: .btn.primary seleciona elementos que têm as duas classes. Com espaço, .btn .primary significa um elemento .primary dentro de um elemento .btn.

Um nome de classe CSS pode começar com número?

No HTML pode, mas um seletor não pode começar com um dígito sem escape, então .1col é CSS inválido. Faça o escape do dígito (.\31 col) ou, melhor, comece os nomes de classe com uma letra.

Conceitos relacionados