Propriedade class do HTML

Definição e uso

class A propriedade define o nome da classe (classname) do elemento.

class A propriedade é principalmente usada para apontar para classes (class) em folhas de estilo. No entanto, também pode ser utilizada para alterar elementos HTML com a classe especificada através de JavaScript (HTML DOM).

Veja também:

Tutorial HTML:Atributos do HTML

Tutorial CSS:Sintaxe do CSS

Manual de referência CSS:Seletor .class do CSS

Manual de referência HTML DOM:Método getElementsByClassName() do HTML DOM

Manual de referência HTML DOM:Propriedade className do HTML DOM

Manual de referência HTML DOM:Propriedade classList do HTML DOM

Manual de referência HTML DOM:Objeto Style do DOM do HTML

Exemplo

Exemplo 1

Usar a propriedade class em documentos HTML:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Cabeçalho 1</h1>
<p>Um parágrafo.</p>
<p class="important">Observe, este é um parágrafo importante.:)</p>
</body>
</html>

Experimente pessoalmente

Mais exemplos no final da página.

Sintaxe

<element class="classname">

Valor do atributo

Valor Descrição
classname

Especificar uma ou mais classes para um elemento.

Para especificar várias classes, você pode usar espaços para separá-las.

Isso permite que você combine várias classes em um elemento HTML.

Por exemplo:<span class="left important">

Regras de nomeação:

  • Deve começar com uma letra A-Z ou a-z
  • Pode conter: letras (A-Za-z), números (0-9), hífen ("-") e sublinhado ("_")

Mais exemplos

Exemplo 2

Adicionar várias classes a um elemento HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Título 1</h1>
<p>Um parágrafo.</p>
</body>
</html>

Experimente pessoalmente

Exemplo 3

Adicionar cor de fundo amarela ao primeiro elemento com class="example" (índice 0) usando JavaScript.

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Experimente pessoalmente

Exemplo 4

Use JavaScript para adicionar a classe "mystyle" ao elemento com id "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

Experimente pessoalmente

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte