Qual a diferença entre CLASS e ID?

Em HTML e CSS, há a possibilidade de aplicar estilos através de 'class' e 'id' e, em JavaScript é possível indentificar algum elemento de uma página por sua classe, id ou tag. Mas qual a diferença entre 'class' e 'id'?

O que são classes?

As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a VÁRIOS elementos de uma vez. Exemplo:
Código CSS:
    

  1. .classe1 {
    2. 

  2.   background: blue;
    3. 

  3. }
    4.
Código HTML:
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="pt-br">
    3. 

  3.   <head>
    4. 

  4.     <title></title>
    5. 

  5.     <meta charset="utf-8">
    6. 

  6.   </head>
    7. 

  7.   <body>
    8. 

  8.     <div class="classe1">Div1</div>
    9. 

  9.     <div class="classe1">Div2</div>
    10. 

  10.     <div class="classe1">Div3</div>
    11. 

  11.     <div class="classe1">Div4</div>
    12. 

  12.     <div class="classe1">Div5</div>
    13. 

  13.   </body>
    14. 

  14. </html>
    15.
Então, todas as 'divs' que estiverem com a classe "classe1" estarão com um background azul(blue).

O que são ids?

As ids são uma forma de identificar um elemento, e devem ser ÚNICAS para cada elemento. É como se fossem impressões digitais de nossos dedos ou RGs. Através delas, pode-se atribuir formatação a um elemento em especial. Exemplo:
Código CSS:
    

  1. #idUm {
    2. 

  2.   background: blue;
    3. 

  3. }
    4. 

  4. #idDois {
    5. 

  5.   background: yellow;
    6. 

  6. }
    7. 

  7. #idTres {
    8. 

  8.   background: lightblue;
    9. 

  9. }
    10. 

  10. #idQuatro {
    11. 

  11.   background: lightgreen;
    12. 

  12. }
    13.
Código HTML:
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="pt-br">
    3. 

  3.   <head>
    4. 

  4.     <title></title>
    5. 

  5.     <meta charset="utf-8">
    6. 

  6.   </head>
    7. 

  7.   <body>
    8. 

  8.     <div id="idUm">Div1</div>
    9. 

  9.     <div id="idDois">Div2</div>
    10. 

  10.     <div id="idTres">Div3</div>
    11. 

  11.     <div id="idQuatro">Div4</div>
    12. 

  12.   </body>
    13. 

  13. </html>
    14.
Então, como mostra o código acima, não podemos repetir uma 'id'. Deve ser especialmente única para cada elemento.

Postagens mais visitadas