Seletores Básicos: Tag, Classe, ID e Atributo

Uma regra CSS tem duas partes: o seletor (a quem se aplica) e o bloco de declarações (o que muda). Exemplo:

seletor {
  propriedade: valor;
  outra-propriedade: outro-valor;
}

O seletor é o que você escreve antes das chaves. Existem quatro seletores básicos que cobrem 90% do dia-a-dia.

1. Seletor de tag (também chamado "de tipo" ou "de elemento")

p {
  color: #333;
}

h1 {
  font-size: 32px;
}

Atinge todas as tags daquele tipo na página. p estiliza todo parágrafo. h1 estiliza todo título principal. É o seletor mais abrangente - use com cautela, porque o efeito "vaza" para todo lugar que tenha aquela tag.

2. Seletor de classe (o mais usado na prática)

<p class="destaque">Texto importante</p>
<button class="botao">Clique</button>

.destaque {
  color: #d93025;
  font-weight: bold;
}

.botao {
  background: #1a73e8;
  color: white;
  padding: 8px 16px;
}

Note o ponto antes do nome: .destaque, .botao. A classe pode ser reutilizada em vários elementos (<p>, <span>, <button>) e um mesmo elemento pode ter várias classes separadas por espaço (class="botao botao-grande"). Esse é o seu pão com manteiga.

3. Seletor de ID

<h1 id="titulo-principal">Meu site</h1>

#titulo-principal {
  font-size: 48px;
  text-align: center;
}

Note o sustenido antes do nome: #titulo-principal. É mais específico que classe e vale para um único elemento na página (IDs devem ser únicos por HTML). Use com moderação - na prática, classes resolvem melhor porque são reutilizáveis.

4. Seletor de atributo

input[type="text"] {
  border: 1px solid #ccc;
}

a[href^="https://"] {
  color: green;
}

Estiliza elementos com base em um atributo HTML. input[type="text"] atinge só inputs do tipo texto. a[href^="https://"] atinge links que começam com https:// (o ^= é "começa com"). É um seletor avançado que vale conhecer; você vai usar menos no início, mas ele brilha em casos como estilizar links externos, inputs obrigatórios, etc.

Combinando tudo

/* Todo <a> dentro de uma tag com classe "menu" */
.menu a {
  text-decoration: none;
}

/* Botão com ambas as classes */
.botao.grande {
  font-size: 20px;
}

• Tag: p, h1, div - amplo, "vaza" para tudo.
• Classe (.nome): o mais usado. Reutilizável, agrupável.
• ID (#nome): único, específico, use com parcimônia.
• Atributo ([atributo="valor"]): nicho, mas poderoso.

Dica: ID em CSS é tentador ("mais específico, vai funcionar!") mas é uma armadilha. Se você usou ID pra forçar uma regra a "ganhar", o próximo desenvolvedor vai usar !important pra ganhar de você, e a guerra começa. Prefira organizar bem as classes e usar a cascata a seu favor.

No próximo nó, vamos colorir a página - todas as formas de escrever uma cor em CSS.