📘 Aula 19 MD-2: Diferenças entre `ID` e `CLASS` 📘

Introdução

Em HTML e CSS, os atributos id e class desempenham papéis essenciais na identificação e estilização de elementos. Enquanto o id é um identificador único que permite aplicar estilos ou manipulações específicas a um único elemento, a class possibilita agrupar elementos semelhantes para compartilhar estilos ou comportamentos.

Compreender essas diferenças é fundamental para criar páginas bem organizadas, sem conflitos de estilos, e para facilitar a manutenção e a escalabilidade do código, além de tornar o design mais consistente e intuitivo.

1. Unicidade

id: Deve ser único na página. Cada elemento só pode ter um id e ele não pode se repetir.
class: Pode ser usado em vários elementos, permitindo aplicar estilos comuns a múltiplos elementos.

2. Seleção no CSS

id: Selecionado com #. Exemplo: #meu-id { color: red; }
class: Selecionada com .. Exemplo: .minha-classe { color: blue; }

3. Especificidade

id: Possui especificidade maior que uma class, prevalecendo em caso de conflito de estilos.
class: Especificidade menor, sendo sobrescrita por estilos aplicados via id.

4. Uso recomendado

id: Para identificar elementos únicos, como cabeçalhos, rodapés ou seções específicas.
class: Para agrupar elementos que compartilham estilos ou comportamentos, como botões, caixas de texto ou itens de lista.

Exemplos práticos

Exemplo 1: Usando `id`

<div id="header">Cabeçalho</div>
<div id="footer">Rodapé</div>

#header {
    background-color: #2a9d8f;
    color: white;
    padding: 10px;
}

#footer {
    background-color: #264653;
    color: white;
    padding: 10px;
}

💡 Cada elemento tem um id único (header e footer) que permite aplicar estilos específicos sem afetar outros elementos da página.

Exemplo 2: Usando `class`

<div class="box">Caixa 1</div>
<div class="box">Caixa 2</div>

.box {
    background-color: #e76f51;
    color: white;
    padding: 8px;
    margin-bottom: 5px;
}

💡 A mesma class (box) é aplicada em múltiplos elementos, permitindo que todos compartilhem o mesmo estilo visual.

Exemplo 3: Herança de classes

<div class="explicacao">
    <p>Texto dentro da explicação</p>
</div>

.explicacao {
    color: green;
    font-family: Arial, sans-serif;
}

💡 O parágrafo herda os estilos da classe explicacao, mostrando como estilos de uma classe podem afetar elementos filhos, a menos que sejam sobrescritos por um id ou outro estilo mais específico.

Referências

Docs ID: MDN Web Docs - id

Docs Class: MDN Web Docs - class

📘 Aula 19 MD-2: Diferenças entre ID e CLASS 📘