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

diferença entre "id" e "class"

Entendo que "id" seja para um único elemento enquanto "class" seja para quando temos mais de um. Na prática não consigo entender isso. Por exemplo, nessa aula 5 (Listas e divisões de conteúdo) temos o uso do "class" em

<img class="imagembeneficios" src="beneficios.jpg">

. No entanto trata-se de uma única imagem e no meu entendimento deveríamos usar o "id=imagembeneficios". Alguém saberia me explicar por que não dá certo o "id" nesse caso?

2 respostas
solução!

Olá Andre, nesse caso dá certo tanto usar id quanto usar class. Uma explanação simples, é que ambos são seletores e podem ser usados para selecionar um ou mais elementos (não existe nada no HTML 5 que te impeça de colocar o mesmo id para vários elementos). Portanto, a diferença dos dois que advém do funcionamento de cada um e de uma convenção de boa utilização, que, nesse caso se torna mais conceitual com um valor puramente semântico.

E esse conceito é: a utilização do atributo class quando você pretende aplicar as propriedades declaradas no CSS em mais de um elemento, que você quer generalizar um conjunto de regras que sejam genéricas o bastante para serem aplicadas a um grupo de elementos. Ou seja, nesse caso, pode-se dizer que futuramente no site você queira colocar mais imagens com as mesmas regras de CSS dessa imagem que já existe.

E a utilização do atributo id quando você pretende aplicar as propriedades declaradas no CSS em somente um único elemento, seja com o objetivo de individualizar/diferenciar esse elemento. Com a mão na massa, isso acontece em prática quando você cria botões para seu site, você normalmente cria um estilo genérico de botão usando as regras de CSS em um atributo class e com o objetivo de diferenciar cores ou outros aspectos você pode criar um id para diferenciar um mesmo botão de outros, podendo especificar a cor ou outras características desse botão diferente.

Mas é importante ressaltar que a diferença de ambos não é somente o valor semântico ou conceitual, pois a prioridade de estilo de um id está acima da prioridade de estilo de class. E na prática, isso quer dizer que um elemento que tenha uma class que diz que a cor dele é verde, e esse mesmo elemento tenha um id que diz que a cor dele é azul, a cor do elemento será azul e não verde.

Futuramente você poderá se deparar com padrões de projeto que usam somente o atributo class para declarar estilo e utilizam predominantemente o atributo id para selecionar um elemento via Javascript. Em conta de que existem várias formas de se escrever o seu código, tudo depende do seu objetivo com ele :)

Espero ter ajudado, bons estudos!

Referências:

Muito obrigado pela explicação, me serviu perfeitamente. Foi direto ao ponto, mas ao mesmo tempo deu um pouco do contexto, assim como já deixou uma dica de como será útil em projetos mais complexos.

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