Diferença entre seletor class e selector id em CSS

Pergunta
Não entendi a diferença entre seletores class e seletores id. Ou seja, em folhas de estilo em cascata vi que às vezes se colocam os estilos CSS através de classes (class) e outras vezes através do atributo id.

Valorize esta FAQ:
A FAQ Diferença entre seletor class e selector id em CSS tem Pertence à categoria:
Resposta
Essa dúvida de CSS é bem básica. Creio que está explicada mais detidamente no Manual de CSS, mas vou comentar isso rapidamente aqui.

A diferença é que os seletores por identificador estão pensados para que o elemento que se seleciona seja único (só se pode colocar um identificador dado a um elemento da página, ou seja, os identificadores devem ser únicos).

No entanto, as classes estão pensadas para poder definir o mesmo estilo a vários elementos da página. Ou seja, você pode atribuir uma mesma classe a vários elementos da página sem problemas. Na verdade, as classes estão pensadas justamente para serem utilizadas em diversos elementos diferentes na página.

Por exemplo, se você tem uma página com um menu de navegação que aparece uma única vez, você pode atribuir um id à camada onde está a barra de navegação. Esse ID será único, porque não há outra barra de navegação igual a essa na página. O id será único.

Agora, se dentro da barra de navegação você tiver vários links e quiser atribuir estilos a todos ao mesmo tempo , você terá que criar uma classe (class de CSS) e atribuí-la a cada um desses links. Os x links que você tiver, terão todos a mesma classe e você atribuirá o estilo de uma vez para todos através da class.

Por Miguel Angel Alvarez

Voltar à árvore de categorias Voltar à árvore de categorias

Comentários da faq
Foi enviado 1 comentário à faq
1 comentário revisado:
outro motivo
Por: marcos-barbosa
06/1/11
Outro motivo para não se usar o mesmo id como identificador é o fato de que ao localizar um determinado elemento pelo seu id usando DOM HTML será retornado apenas o primeiro elemento que correponda ao id procurado (exemplo: document.getElementById("nome_id") ). Nesse caso retornaria apenas o primeiro elemenento referenciado por "nome_id", pois no DOM o id deve ser único numa página.
 
FAQs relacionadas
  + Links que mudam ao passar o mouse
  + Diferenças de colocar estilos CSS em diferentes lugares
  + Mudar tipografia para toda a página
  + Mudar o tamanho de letra de um menu select
  + Estilo nos campos de formulário
  + Estilos em barras de deslocamento
  + Como eliminar as margens de cima e debaixo que tem um formulário
  + Definir as margens de um cabeçalho ou título <h1>
  + Alinhamento de texto à direita
  + Mudar o estilo da primeira letra de um parágrafo
  + [...]

Ver todas las FAQS de CSS

Usuários :    login / registro

Home | Sobre nós | Copyright | Anuncie | Entrar em contato