Carregando...

Seletores CSS

Uma regra CSS tem duas tarefas: dizer quem será estilizado e como. O «como» você já praticou com propriedades, valores e unidades. Esta sessão trata do «quem»: o seletor, que abre a regra.

O que são seletores CSS?

Um seletor é um padrão que o navegador usa para descobrir em quais elementos HTML aplicar o bloco de declarações. Se o seletor corresponder a um elemento da página, esse elemento recebe todos os estilos de dentro das chaves { }.

Tipos básicos de seletor num relance

Comece por estes quatro. Combinadores, atributos e pseudoclasses entram em sessões futuras; antes, ganhe segurança com elemento, class, id e *.

📊 Seletores CSS básicos

Seletor O que seleciona Exemplo
Elemento (tipo) Todos os elementos com aquele nome de tag p { … }
Class Elementos que têm aquele atributo class .card { … }
Id O único elemento com aquele id #hero { … }
Universal Todos os elementos (use com moderação) * { … }

Seletores de elemento (tipo)

O seletor de elemento é só o nome da tag, sem ponto e sem cerquilha. h1 estiliza todo <h1> da página e p, todo parágrafo. É a ferramenta mais ampla do dia a dia quando você quer uma base uniforme para uma tag.

Seletores de elemento para títulos e parágrafos

css
CSS Code 
h1 {
color: #0f766e;
font-size: 2rem;
}

p {
color: #334155;
line-height: 1.6;
}

Quando os seletores de tipo ajudam

Use-os para padrões do site inteiro: cor do texto no body, peso dos títulos, espaçamento das listas. Se só alguns parágrafos precisam ter outra aparência, prefira uma class em vez de mudar todos os p.

Seletores de class

O seletor de class começa com um ponto (.) seguido do nome da class. No HTML, você marca os elementos com class="card". Uma mesma class pode aparecer em vários elementos, e é por isso que as classes são a base de um design reutilizável.

Seletor de class para cartões reutilizáveis

css
CSS Code 
.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

O HTML precisa combinar com o nome da class

O CSS .card só estiliza elementos que realmente tenham class="card" (ou várias classes, entre elas card). A grafia precisa ser idêntica: .Card e .card são seletores diferentes.

Seletores de id

O seletor de id começa com uma cerquilha (#) seguida do nome do id. No HTML, você escreve id="hero". Um id deve ser único na página: um só elemento. Para a maior parte dos estilos, prefira classes e reserve o id para um ponto de referência que de fato existe uma única vez.

Seletor de id para um banner único

css
CSS Code 
#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

O seletor universal (*)

O seletor universal * corresponde a todos os elementos. Às vezes é usado num reset simples (por exemplo, definir box-sizing), mas aplicar cores ou margens a tudo pode atrapalhar o seu layout. Para o visual do dia a dia, escolha seletores mais direcionados.

Seletor universal usado com cuidado

css
CSS Code 
* {
box-sizing: border-box;
}

Juntando seletores numa página

Folhas de estilo reais misturam os tipos: padrões com seletores de elemento, peças reutilizáveis com classes e alvos únicos e raros com ids. Esta folha pequena mostra o hábito: nem toda regra precisa de um id.

Pequena mistura de tipos de seletor numa página

css
CSS Code 
body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

Class ou id: um hábito prático

  • Prefira classes para botões, cartões, links de navegação e tudo que você possa reutilizar
  • Use um id quando o alvo for realmente único (um banner da página, a caixa de busca principal)
  • Não invente um id novo para cada caixa estilizada: isso atrapalha a reutilização e dá dor de cabeça nas lições sobre cascata

Experimente você mesmo

  1. Numa página de prática, adicione um <h1>, dois <p>, um <div class="card"> e uma <section id="hero">.
  2. Escreva uma regra de elemento para h1 e p.
  3. Estilize .card com espaçamento interno (padding), fundo claro e borda.
  4. Estilize #hero com fundo escuro e texto claro.
  5. Opcional: adicione * { box-sizing: border-box; } e veja que o padding dentro do cartão fica mais previsível.

Erros comuns

  • Escrever card { } quando você queria .card { }: sem o ponto, o navegador procura um elemento chamado card, que não existe no HTML
  • Escrever hero { } em vez de #hero { }: faltou a cerquilha
  • Colocar class="card" no HTML mas escrever .crd no CSS: sem correspondência, sem estilos
  • Dar o mesmo id a vários elementos: HTML inválido e seleção imprevisível
  • Usar só seletores de tipo para um design pontual: todo p ou div muda quando você só queria alterar um bloco

Resumo

  • Seletores escolhem quais elementos HTML recebem os estilos da regra
  • Seletores de elemento usam o nome da tag (h1, p)
  • Seletores de class começam com ponto (.card) e correspondem ao atributo class no HTML
  • Seletores de id começam com cerquilha (#hero) e devem mirar um único elemento
  • * corresponde a tudo: útil para resets cuidadosos, não para decorar a página toda
  • Prefira classes para interface reutilizável; mantenha os ids raros e únicos

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial