As diferenças entre class e id no CSS

Sempre quando alguém inicia no CSS tem a clássica dúvida das diferenças entre class e id, pois os dois tem utilizações semelhantes, neste post vou sanar esta dúvida e explicar as particularidades e casos de uso dos dois.

No CSS há basicamente três formas de definir estilos para os elementos do HTML

o próprio elemento;
class;
id;

O próprio elemento seria chamar a tag do elmento no CSS, classe são os seletores iniciados por um “.” e o id são os seletores iniciados por um “#”

Exemplificando:

<!-- HTML -->

<div></div>
<div class="container"></div>
<div id="box"></div>

/* CSS */
div {
 background-color: red;
}

.container {
 background-color: green;
}

#box {
 background-color: blue;
}

Esta é a primeira diferença, a forma em que nós temos de nos referenciar a cada um deles no HTML um por class e outro por id

E a segunda a chamada no CSS, class por “.” e id por “#”

Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.

Já nas diferenças mais técnicas: utilizamos classes quando vamos repetir o elemento várias vezes na página

Então utilizamos a mesma classe para cada uma destas repetições

Podemos dizer então que uma classe será utilizada em elementos que precisam repetir muitas vezes em uma página

Já o id é exatamente ao contrário!

Quando o elemento não vai repetir na página, elemento único, ele preferencialmente deve receber um id

Então não podemos ter dois ids iguais na mesma página

Veja o exemplo:

<ul id="lista_de_compras">
 <li class="item">Arroz</li>
 <li class="item">Feijão</li>
 <li class="item">Macarrão</li>
 <li class="item">Carne</li>
</ul>

Neste caso teremos apenas uma lista de compras na nossa página

Então esta lista receberá o id de lista_de_compras

E como temos vários itens nesta lista e também podemos reaproveitar em outra, utilizamos a class item para padronizar o estilo deste elemento

Assim economizamos também linhas de CSS, declarando e estilizando ele uma só vez

Lembre-se de que:

Um elemento pode ter só um id;
Um id não deve ser utilizado mais que uma vez na mesma página;

E no caso das classes:

Você pode utilizar a mesma classe em vários elementos;
Um elemento pode ter múltiplas classes;
E claro: um elemento pode ter um id e diversas classes;

Outro ponto importante é que o id é mais específico que a classe

Então se você colocar dois estilos, por exemplo, de background-color em um elemento que tem class e id

O estilo do id vai sobrepor o da classe, legal né? 😀

obs: Se você não precisar de class e id não os utilize, utilize o próprio seletor do elemento, o código fica até mais simples de entender, porque todos já sabem o que um elemento <a> representa mas não o que a classe ou id deste elemento representa, ai só debugando… 🙂