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

Uso do id e class

Fiz alguns testes e percebi que o comportamento é o mesmo nos seguintes casos:

<ul id="listaItens">
</ul>
<ul class="listaItens">
</ul>

Que é o mesmo comportamento da forma apresentada em aula, adicionando a classe nos itens da lista. Sendo o comportamento semelhante, quando é preferivel usar um ao inves de outro? Isso seria questão de convenção ou por algo que rode por "baixo dos panos" no navegador?

5 respostas

Olá Valdenei, o id é usado quando se quer identificar apenas um único elemento por exemplo:

<p id="lucas">Lucas</p>
<p>Maria</p>
<p>José</p>

No exemplo acima eu estou usando para me referir apenas a tag p onde possui o id lucas. O id só pode ser usado uma vez. Ao contrário da classe. Classes são usadas quando quer se referir a todos os elementos que contenham esta classe.

<p class="nome">Lucas</p>
<p class="nome">Maria</p>
<p class="nome">José</p>

Já nesse caso eu posso me referir a todos os elementos que contenha a classe nome. Espero ter ajudado, qualquer coisa coloca nos comentarios.

Consegui compreender, obg. Mas me surgiu outro ponto:

<ul clas="Classe">
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li class="Classe"></li>
    <li class="Classe"></li>
    <li class="Classe"></li>
</ul>

Em que situações é preferivel usar um ou outro?

solução!

Quando você usa em uma tag você referencia toda ela. No primeiro caso você está referenciando toda a ul, já no segundo você está referenciando cada item da lista. Normalmente, não se usa a mesma classe, às vezes você quer diferenciar, então se coloca por exemplo:

<style>
.red {
    background-color: 'red';
}
</style>

<ul class="red">
    <li></li>
    <li></li>
    <li></li>
</ul>

Nesse primeiro caso eu estou colocando toda a ul como cor vermelha.

<style>
.red {
    background-color: #ff0000;
}

.green {
    background-color: #00ff00
}

.blue {
    background-color: #0000ff
}
</style>

<ul>
    <li class="red"></li>
    <li class="green"></li>
    <li class="blue"></li>
    <li class="red"></li>
</ul>

Nesse segundo caso eu estou pegando um item da classe em específico e colocar cores de acordo com essas classes que eu criei.

consegui compreender a diferença no uso, muito obrigado

Otimo precisava ver isso que tinha surgido a mesma duvida