Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

id x classe

Olá!

Uma dúvida bem simples: quando devo usar classes e quando devo usar ids?

Agradeço pela ajuda.

3 respostas
solução!

Oi, Igor, tudo bem?

Então, as classes trabalham de uma forma que identificam um grupo de elementos. Através delas, pode-se atribuir a estilização de vários elementos de uma vez só. E para identifica-la no css, usa-se o ponto (.), antes do nomeVê no exemplo:

<div class="container"> 
<h1> Seu trabalhos</h1>
</div>

<div class="container"> 
<h1> Seu texto de apresentação</h1>
</div>

<div class="container"> 
<h1> Seu currículo</h1>
</div>            
.container{
    background-color: red;
}

Acima vemos que consigmos fazer a mesma edição das três div igualmente com a classe container a partir do código CSS, ou seja, as três tags divs ficarão com o fundo vermelho

Já o ID, é o oposto da Classe, ele só se refere a um elemento. Ela é exclusiva. Não podendo haver mais de uma ID com o mesmo nome. E para identifica-la no css, usa-se o cerquilha (#)

<div id="wrap"> 
<h1> Seu trabalhos</h1>
</div>

<div class="container"> 
<h1> Seu texto de apresentação</h1>
</div>

<div class="container"> 
<h1> Seu currículo</h1>
</div>            
#wrap{
    background-color: blue;
}

No exemplo acima, somente o ID wrap irá estilizar o fundo com a cor azul.

Uma boa prática com desenvolvimento web é utilizar mais classes pelo seu poder de ser reutilizada várias vezes. Enquanto o ID é exclusivo, você não terá esse mesmo poder.

Espero ter te ajudado!

As duas tem a mesma funcionalidade. Mas o ID é usado para localizar um elemento mais especifico, portando, só podendo utilizá-lo apenas uma vez. Enquanto o class é mais reutilizável, podendo usá-lo em diversos elementos. Ex:

<div id="caixa-vermelha" class="container">
    <p>Exemplo</p>
</div>
<div class="container">
    <p>Exemplo2</p>
</div>
<div class="container">
    <p>Exemplo3</p>
</div>

Obrigado pela ajuda Laís e Thales. Esclareceram minhas dúvidas.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software