Seletores CSS

Seletores CSS

Seletores são o núcleo do CSS — seu trabalho é "selecionar" os elementos HTML que você deseja estilizar. O CSS oferece múltiplos tipos de seletores, desde seletores de tag simples até combinações complexas de seletores, dando controle preciso sobre qualquer elemento.

Seletores Básicos

1. Seletor de Tag (Seletor de Elemento)

Usa nomes de tags HTML diretamente como seletores, combinando todas as tags com o mesmo nome no documento.

/* Todos os elementos <p> ficam vermelhos */
p {
  color: red;
}

/* Todos os elementos <h1> ficam azuis */
h1 {
  color: blue;
}

/* Todos os elementos <div> recebem borda */
div {
  border: 1px solid black;
}

2. Seletor de Classe

Combina elementos pelo atributo class. Nomes de classe são prefixados com um ponto ..

/* Todos os elementos com class="highlight" */
.highlight {
  background-color: yellow;
}

/* Apenas elementos <p> com class="center" */
p.center {
  text-align: center;
}

Elementos HTML podem ter múltiplas classes, separadas por espaços:

<p class="highlight center">Este texto está destacado e centralizado</p>

3. Seletor ID

Combina elementos pelo atributo id, prefixado com um hash #.

/* Selecionar elemento com id="header" */
#header {
  background-color: #333;
  color: white;
}

Nota: Um ID só pode aparecer uma vez por página. Seletores ID são tipicamente usados para elementos únicos.

4. Seletor Universal

Usa um asterisco * para combinar todos os elementos no documento.

/* Resetar margens e preenchimento para todos os elementos */
* {
  margin: 0;
  padding: 0;
}

O seletor universal é conveniente, mas cuidado com o desempenho — se estilos complexos forem aplicados, pode afetar a velocidade de renderização da página.

Especificidade do Seletor

Quando múltiplos seletores se aplicam ao mesmo elemento, o navegador usa regras de especificidade para determinar qual estilo é efetivo:

Prioridade de alta para baixa:

Estilos Inline > Seletores ID > Seletores de Classe > Seletores de Tag

Exemplo de Cálculo de Especificidade

/* Especificidade: 0001 */
p {
  color: black;
}

/* Especificidade: 0010 */
.text {
  color: blue;
}

/* Especificidade: 0100 */
#special {
  color: green;
}

/* Especificidade: 0011 (classe + tag) */
p.text {
  color: red;
}

Para o mesmo elemento <p class="text" id="special">, a cor final do texto será verde (o seletor ID tem a maior especificidade).

!important

O CSS fornece uma "arma nuclear" — !important — que força um estilo a ter a maior prioridade:

p {
  color: red !important;
}

Não use !important a menos que seja absolutamente necessário — torna a depuração de estilos difícil. Priorize resolver problemas aumentando a especificidade do seletor.

Melhores Práticas para Seletores

1. Use seletores de classe frequentemente: Classes são reutilizáveis e o seletor mais flexível
2. Use seletores ID com moderação: IDs são únicos, difíceis de reutilizar, e sua alta especificidade pode causar problemas de sobrescrita
3. Evite sobre-especificação: div.container ul li a é muito específico; .nav-link é suficiente
4. Mantenha seletores concisos: Seletores mais longos são mais difíceis de manter e afetam o desempenho

❓ Perguntas Frequentes

📖 Resumo

• Seletores são a habilidade fundamental do CSS — dominar seletores de tag, classe e ID cobre a maioria das necessidades de estilo
• Entender a especificidade dos seletores ajuda a evitar confusão sobre "por que meu estilo não funciona"
• Na prática, seletores de classe são usados mais frequentemente — prefira estilos baseados em classe

📝 Exercícios

1. Crie uma página HTML com títulos, parágrafos e listas.
2. Use seletores de tag para definir a cor do texto para todos os parágrafos.
3. Use seletores de classe para definir diferentes cores de fundo para elementos específicos (defina pelo menos 2 classes diferentes).
4. Use seletores ID para definir estilos especiais para um elemento na página.
5. Teste: Aplique seletores de tag, classe e ID ao mesmo elemento e observe qual tem a maior prioridade.