Utilizando CSS - Diferenças entre IDs e Classes

Principalmente quando no início dos estudos sobre desenvolvimento para web, é comum haver confusões entre IDs e Classes, tão utilizados e necessários em XHTML, CSS e Javascript. Vários tutoriais na internet explicam alguns pontos básicos e dão certas orientações, mas nada muito aprofundado e esclarecedor. O resultado: as dúvidas persistem e a diferença entre ID e Classe ainda não é “desvendada”. Com este artigo este “mistério” chega ao fim!

IDs e classes são “anzóis”

Precisamos de formas de descrever conteúdos em documentos HTML / XHTML. Os elementos básicos como <h1>, <p> e <ul> frequentemente fazer o trabalho, mas o conjunto básico de tags não abragen todas as possibilidades de elementos de página ou escolhas de layout. Para isso, precisamos de IDs e Classes.

Por exemplo <ul id=”nav”>, isso dá a oportunidade de visar especificamente esta lista, então há uma maneira de manipular esta lista exclusivamente em relação a outras listas não-ordenadas da página. Ou talvez tivéssemos uma seção na página que não possui uma tag relevante para signifcar, por exemplo, um rodapé, onde poderíamos fazer algo como <div id=”footer”>. Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma: <div class=”sidebar-box”>.

Esses IDs e classes são os “anzóis” que precisamos fazer na marcação para colocarmos as mãos neles. CSS obviamente precisa disso para que possa fazer seletores e montar folhas de estilos, mas outras linguagens web, como javascript, também dependem deles. Mas quais as diferenças entre IDs e classes?