Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

Atributo de classe HTML


O atributo HTML classé usado para especificar uma classe para um elemento HTML.

Vários elementos HTML podem compartilhar a mesma classe.


Usando o atributo de classe

O classatributo é frequentemente usado para apontar para um nome de classe em uma folha de estilo. Ele também pode ser usado por um JavaScript para acessar e manipular elementos com o nome de classe específico.

No exemplo a seguir temos três <div>elementos com um classatributo com o valor "city". Todos os três <div> elementos serão estilizados igualmente de acordo com a .city definição de estilo na seção principal:

Exemplo

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

No exemplo a seguir temos dois <span>elementos com um classatributo com o valor "note". Ambos os <span> elementos serão estilizados igualmente de acordo com a .note definição de estilo na seção head:

Exemplo

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Dica: O classatributo pode ser usado em qualquer elemento HTML.

Nota: O nome da classe diferencia maiúsculas de minúsculas!

Dica: Você pode aprender muito mais sobre CSS em nosso Tutorial de CSS .



A sintaxe da classe

Para criar uma classe; escreva um caractere ponto (.), seguido por um nome de classe. Em seguida, defina as propriedades CSS entre chaves {}:

Exemplo

Crie uma classe chamada "cidade":

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Várias classes

Elementos HTML podem pertencer a mais de uma classe.

Para definir várias classes, separe os nomes das classes com um espaço, por exemplo, <div class="city main">. O elemento será estilizado de acordo com todas as classes especificadas.

No exemplo a seguir, o primeiro <h2>elemento pertence à cityclasse e também à mainclasse e obterá os estilos CSS de ambas as classes: 

Exemplo

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Diferentes elementos podem compartilhar a mesma classe

Diferentes elementos HTML podem apontar para o mesmo nome de classe.

No exemplo a seguir, ambos <h2>e <p> apontam para a classe "city" e compartilharão o mesmo estilo:

Exemplo

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

Uso do atributo class em JavaScript

O nome da classe também pode ser usado pelo JavaScript para executar determinadas tarefas para elementos específicos.

JavaScript pode acessar elementos com um nome de classe específico com o getElementsByClassName()método:

Exemplo

Clique em um botão para ocultar todos os elementos com o nome da classe "cidade":

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

Não se preocupe se você não entender o código no exemplo acima.

Você aprenderá mais sobre JavaScript em nosso capítulo HTML JavaScript , ou poderá estudar nosso Tutorial JavaScript .


Resumo do capítulo

  • O atributo HTML classespecifica um ou mais nomes de classe para um elemento
  • As classes são usadas por CSS e JavaScript para selecionar e acessar elementos específicos
  • O classatributo pode ser usado em qualquer elemento HTML
  • O nome da classe diferencia maiúsculas de minúsculas
  • Diferentes elementos HTML podem apontar para o mesmo nome de classe
  • JavaScript pode acessar elementos com um nome de classe específico com o getElementsByClassName() método

Exercícios HTML

Teste-se com exercícios

Exercício:

Crie um seletor de classe chamado "especial".

Adicione uma propriedade de cor com o valor "blue" dentro da classe "special".

<!DOCTYPE html>
<html>
<head>
<style>

  ;

</style>
</head>
<body>

<p class="special">Meu parágrafo</p>

</body>
</html>