Atributo Class do HTML
O atributo class define um ou mais nomes de classe para um elemento e pode ser usado pelo JavaScript para modificar elementos HTML.
O atributo class do HTML atribui um ou mais nomes de classe a um elemento. Esses nomes são o principal gancho que o CSS e o JavaScript utilizam para encontrar o elemento, estilizá-lo ou modificá-lo.
Por que usar o atributo class
A razão pela qual as classes são importantes é a separação de responsabilidades. O HTML descreve a estrutura da página, enquanto a estilização fica na folha de estilos. O atributo class é o elo entre eles, e esse elo possui duas propriedades importantes:
- Reutilizável. A mesma classe pode ser aplicada a quantos elementos você quiser — um
<h2>, um<p>e um<button>podem compartilharclass="highlight"e herdar a mesma regra. Escreva o estilo uma vez e aplique em qualquer lugar. - Um identificador de seleção. Uma classe é um rótulo que você pode selecionar. No CSS, você a seleciona com um ponto (
.highlight); no JavaScript, você a encontra ou modifica por meio do DOM. Sem classes, você teria de estilizar cada elemento de forma inline e se repetir constantemente.
No HTML5, o atributo class é um atributo global, portanto pode ser usado em qualquer elemento.
class vs. id
Tanto class quanto o atributo id rotulam elementos para que você possa selecioná-los, mas respondem a perguntas diferentes:
- Um
iddeve ser único no documento — exatamente um elemento possui um determinado id. Use-o quando se referir a este elemento específico (um gancho para JavaScript, um destino de âncora na página). - Uma
classé reutilizável — qualquer número de elementos pode compartilhá-la, e um elemento pode ter várias classes. Use-a sempre que um estilo ou comportamento se aplicar a um grupo de elementos.
No estilo do dia a dia, class é a opção que você vai querer na maior parte do tempo, pois o design é construído a partir de padrões repetidos e compartilhados.
Nomes de classe válidos
O nome deve começar com uma letra (a–z ou A–Z), um hífen (-) ou um sublinhado (_), e pode conter letras, dígitos (0–9), hífens e sublinhados. Os nomes de classe diferenciam maiúsculas de minúsculas, portanto card e Card são classes diferentes. É recomendável nomear as classes de acordo com a finalidade do elemento, não com sua aparência — intro envelhece melhor do que big-red.
<!-- Valid -->
<div class="my-card"></div>
<div class="_intro card2"></div>
<!-- Invalid -->
<div class="1card"></div> <!-- cannot start with a digit -->
<div class="my card"></div> <!-- a space here means TWO classes, not one -->A última linha é uma surpresa comum: um espaço dentro do valor do atributo não cria um único nome com espaço — ele separa o valor em múltiplos nomes de classe.
Sintaxe
<tag class="classname"></tag>Exemplo do atributo class do HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p class="red">It is some red paragraph.</p>
<p>This is a some text.</p>
<p class="orange">It is some orange paragraph.</p>
</body>
</html>No CSS, para selecionar todos os elementos com uma classe específica, escreva um ponto (.) seguido do nome da classe. Consulte Seletores CSS para conhecer o conjunto completo de formas de selecionar elementos.
Exemplo do atributo class do HTML usado com CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #1c87c9;
color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<h1>Example of the class attribute</h1>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Você também pode manipular o atributo class a partir do JavaScript por meio da propriedade classList do elemento. Seus três métodos mais usados são:
classList.add('name')— adiciona uma classe (não faz nada se já estiver presente).classList.remove('name')— remove uma classe.classList.toggle('name')— adiciona a classe se estiver ausente, remove-a se estiver presente. Ideal para estados de liga/desliga como "active" ou "open".
Exemplo do atributo class do HTML usado com JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="demo">Click a button to change this paragraph's class.</p>
<button onclick="document.getElementById('demo').classList.add('highlight')">Add</button>
<button onclick="document.getElementById('demo').classList.remove('highlight')">Remove</button>
<button onclick="document.getElementById('demo').classList.toggle('highlight')">Toggle</button>
</body>
</html>Os elementos HTML também podem ter mais de um nome de classe. Cada um deve ser separado por um espaço.
Exemplo do atributo class do HTML com múltiplos nomes de classe
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #202131;
color: #dddddd;
padding: 15px 25px;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<h1>Example of multiple classes</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">London</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title text-right">Paris</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">Tokyo</h2>
</body>
</html>Tags diferentes, como <h2> e <p>, podem ter o mesmo nome de classe e o mesmo estilo.
Exemplo do atributo class do HTML com os elementos <h2> e <p>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grey-text {
color: #808080;
}
</style>
</head>
<body>
<h1>Example of the class attribute </h1>
<h2 class="grey-text">Heading</h2>
<p class="grey-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Nota de acessibilidade
Os nomes de classe não têm significado para leitores de tela ou outras tecnologias assistivas — eles existem puramente para estilização e scripting. Um class="button" em um <div> não é anunciado como um botão. Portanto, uma classe jamais substitui a escolha do elemento semântico correto (use um verdadeiro <button>) nem a adição de ARIA onde for necessário. Use classes para estilizar; use semântica para transmitir significado.
No HTML 4.01, o atributo class era proibido em alguns elementos de nível de cabeçalho (como <head>, <html>, <base>, <meta>, <script>, <style> e <title>). Essa restrição é histórica: no HTML5, class é um atributo global permitido em todos os elementos, portanto você não precisa mais se preocupar com isso.