Class - CSS-Tricks | CSS Almanac 2025

Um seletor de classe em CSS começa com um ponto (.), Assim:

.class ( )

Um seletor de classe seleciona todos os elementos com um atributo de classe correspondente.

Por exemplo, este elemento:

Push Me

é selecionado e estilizado como este:

.big-button ( font-size: 60px; )

Você pode dar a uma classe qualquer nome que comece com uma letra, hífen (-) ou sublinhado (_). Você pode usar números em nomes de classes, mas um número não pode ser o primeiro ou o segundo caractere após um hífen. A menos que você enlouqueça e comece a escapar dos seletores, o que pode ficar estranho:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Um elemento pode ter mais de uma classe:


 This paragraph will get styles from .intro and .blue selectors.

Um elemento com várias classes é estilizado com as regras CSS para cada classe. Você também pode combinar várias classes para selecionar elementos:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Esta demonstração mostra como os seletores de classe única são diferentes dos seletores combinados:

Você também pode limitar um seletor de classe a um tipo específico de elemento, que às vezes é chamado de “qualificação de tag”:

ul.menu ( list-style: none; )

Especificidade

Por si só, um seletor de classe tem um valor de especificidade de 0, 0, 1, 0. Isso é “mais poderoso” do que um seletor de elemento (como:), a ( )mas menos poderoso do que um seletor de ID (como #header ( )). A especificidade aumenta quando você combina seletores de classe ou limita o seletor a um elemento específico.

Acessando aulas com JavaScript

Você pode ler e manipular as classes de um elemento classListem JavaScript. Por exemplo, adicionar uma classe pode ser assim:

document.getElementById('italicize').classList.add('italic');

Esta demonstração mostra exemplos básicos de classListem uso:

jQuery também tem modos para interagir com as classes, incluindo .addClass(), .removeClass(), .toggleClass(), e .hasClass().

Mais Informações

Leia a especificação W3C para seletores de classe.
Saiba mais sobre nomes de classes semânticas.
Saiba mais sobre especificidade.
Aprenda sobre a diferença entre classes e IDs.
Aprenda sobre vários seletores de classe e combinações de seletores de classe / ID.
Aprenda sobre a API .classList.
Aprenda sobre manipulação de classes em jQuery.