🎯 Seletor ID CSS

Introdução

O seletor ID é utilizado no CSS para aplicar estilos em um elemento específico da página HTML.

Diferente das classes, um ID deve ser único dentro do documento.

O que é um ID?

O atributo id identifica exclusivamente um elemento HTML.

<div id="cabecalho">

Conteúdo

</div>

Sintaxe do Seletor ID

No CSS utilizamos o caractere cerquilha (#).

#cabecalho {

 background: blue;

 color:white;

}

Aplicando ID no HTML

<header id="topo">

Minha Página

</header>

#topo {

height:100px;

}

Exemplo Prático

HTML

<h1 id="titulo">

Curso Desenvolvimento Web

</h1>



CSS


#titulo {

color:blue;

font-size:35px;

}

ID deve ser único

Um mesmo ID não deve aparecer em vários elementos.

❌ Incorreto:


<p id="texto">

Texto 1

</p>


<p id="texto">

Texto 2

</p>

✅ Correto:


<p id="texto-principal">

Texto

</p>

ID x Classe

Especificidade CSS

Quando existem vários estilos aplicados ao mesmo elemento, o navegador utiliza regras de prioridade.

Exemplo de Especificidade

p {

color:black;

}


.texto {

color:blue;

}


#principal {

color:red;

}

O ID terá prioridade sobre classe e elemento.

Uso do ID com Links Internos

IDs também são utilizados para criar navegação dentro da página.

<a href="#contato">

Ir para contato

</a>



<section id="contato">

Contato

</section>

ID no JavaScript

O JavaScript utiliza bastante o ID para localizar elementos.

document.getElementById("menu");

Quando utilizar ID?

• Elemento único da página.
• Âncoras internas.
• Manipulação JavaScript.
• Componentes exclusivos.

Quando evitar ID?

Em projetos modernos, muitos desenvolvedores preferem utilizar classes para estilização.

Boas Práticas

• Usar nomes descritivos.
• Não repetir IDs.
• Evitar IDs somente para estilos.
• Preferir classes para componentes.
• Manter padrão de nomenclatura.

Erros Comuns

Resumo Final