Qual a diferença entre o atributo “Class” e “ID”

Por | Atualizado em 2014-01-13
class e id

Os atributos “class” e “id” permitem ao utilizador adicionar estilos numa página Web, através da linguagem CSS. No entanto, é normal existir alguma confusão sobre quando é que se deve optar um “Id” ou uma “class”.

Neste tutorial, iremos explicar a diferença entre os dois atributos (com exemplos), e explicar em que situações deverá aplicar cada atributo.

Atributo Class


O atributo class é utilizado para atribuir um determinado conjunto de estilos a um grupo de elementos. É possível usar o mesmo atributo class várias vezes na mesma página.

Para isso, você deve declarar o atributo class na secção <style> da sua página, começando a declaração do atributo por um “.”.

O nome do atributo class NÃO pode começar por um número. Por exemplo:

<html>
<head>
<style>
.ctr{
text-align: center;
}
</style>
</head>
<body>
<p class="ctr">Este paragrafo ficará centrado.</p>
</body>
</html>

Resumo do atributo class:

  • Pode utilizar um atributo class várias vezes numa página;
  • O atributo class é declarado começando pelo carácter “.”;

Atributo Id


O atributo “id” é utilizado para identificar um elemento único na página. O seu código não irá passar na validação se você utilizar o mesmo atributo “id” em mais do que uma ocasião.

A declaração do atributo id deve ser iniciada com um “#”. Você poderá utilizar o atributo “id” para especificar um estilo de um elemento, ou então, para manipular dados de um elemento em Javascript.

Exemplo de atributo “ID”:

<html>
<head>
<style>
#ctr{
text-align: center;
}
</style>
</head>
<body>
<p id="ctr">Este paragrafo ficará centrado.</p>
</body>
</html>

Resumo do atributo id:

  • Pode utilizar um atributo id uma única vez numa página;
  • O atributo id é declarado começando pelo carácter “#”;
  • Pode usar o atributo id para manipular dados em Javascript.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *