Seletores CSS avançados e combinadores

Seletores básicos ajudam você a estilizar páginas simples. Conforme seu HTML cresce, muitas vezes você precisa estilizar elementos de acordo com onde eles estão, dentro de qual elemento estão ou quais atributos eles têm.

Seletores avançados ajudam você a apontar para os elementos com mais precisão. Assim, você pode escrever um HTML mais limpo e evitar adicionar uma classe a cada tag.

Revisão rápida dos seletores básicos

Você já conhece estes seletores comuns:

• Um seletor de elemento aponta para todas as tags de um tipo, como p.
• Um seletor de classe começa com . e aponta para elementos com essa classe, como .button.
• Um seletor de ID começa com # e aponta para um elemento único, como #main-header.

Seletores avançados usam essas bases.

O que é um combinador?

Um combinador é um símbolo ou espaço que descreve uma relação entre dois seletores.

Por exemplo, um combinador pode significar:

• Selecione um parágrafo dentro de um card.
• Selecione apenas itens diretos dentro de um menu.
• Selecione um botão que vem logo depois de um campo de texto.

Seletor descendente

O seletor descendente seleciona um elemento dentro de outro elemento, mesmo que ele esteja aninhado vários níveis abaixo.

Sintaxe:

O espaço entre os seletores é importante.

<div class="card">
  <h2>Bem-vindo</h2>
  <div>
    <p>Este parágrafo está dentro do card.</p>
  </div>
</div>

<p>Este parágrafo está fora do card.</p>

<style>
  .card p {
    color: blue;
  }
</style>

A regra .card p significa: encontre qualquer elemento p que esteja em qualquer lugar dentro de um elemento com a classe card.

O parágrafo fora de .card não é selecionado.

Use isso quando quiser estilizar conteúdo dentro de uma seção, card, artigo ou área de navegação.

Seletor filho

O seletor filho seleciona apenas filhos diretos. Ele não seleciona netos nem elementos aninhados mais profundamente.

Sintaxe:

<div class="toolbar">
  <button>Salvar</button>
  <button>Prévia</button>

  <div class="more-actions">
    <button>Excluir</button>
  </div>
</div>

<style>
  .toolbar > button {
    background-color: blue;
    color: white;
    padding: 8px 12px;
  }
</style>

A regra .toolbar > button significa: selecione apenas os elementos button que estão diretamente dentro de .toolbar.

O botão Excluir não é selecionado porque primeiro está dentro de .more-actions. Ele está mais de um nível abaixo.

Use isso quando uma seção tem itens diretos e itens aninhados que devem ter estilos diferentes.

Seletor de irmão adjacente

O seletor de irmão adjacente seleciona um elemento que vem imediatamente depois de outro elemento.

Elementos irmãos compartilham o mesmo pai.

Sintaxe:

<article>
  <h2>Aprendendo CSS</h2>
  <p>Este primeiro parágrafo apresenta a aula.</p>
  <p>Este segundo parágrafo continua a ideia.</p>
</article>

<style>
  h2 + p {
    margin-top: 0;
    color: blue;
    font-size: 20px;
  }
</style>

A regra h2 + p significa: selecione um elemento p apenas quando ele vier diretamente depois de um h2.

O segundo parágrafo não é selecionado porque não está diretamente depois do título.

Use isso quando o primeiro parágrafo depois de um título precisa de um estilo especial.

Seletor de irmão geral

O seletor de irmão geral seleciona todos os elementos irmãos correspondentes que vêm depois de outro elemento.

Eles precisam compartilhar o mesmo pai, mas não precisam estar lado a lado.

Sintaxe:

<section>
  <h3>Ingredientes</h3>
  <strong>Lista do café da manhã</strong>
  <p>Farinha</p>
  <p>Ovos</p>
  <p>Leite</p>
</section>

<style>
  h3 ~ p {
    color: blue;
  }
</style>

A regra h3 ~ p significa: selecione cada elemento p que vem depois do h3 dentro do mesmo pai.

O elemento strong entre eles não importa.

Use isso quando vários elementos depois de um título ou rótulo precisam do mesmo estilo.

Seletores de atributo

Um seletor de atributo seleciona elementos pelos seus atributos HTML.

Atributos são detalhes extras dentro das tags HTML, como href, type, alt ou placeholder.

Sintaxe:

<label>
  Nome
  <input type="text" placeholder="Digite seu nome" />
</label>

<label>
  Senha
  <input type="password" placeholder="Digite sua senha" />
</label>

<style>
  input[type="text"] {
    background-color: lightyellow;
  }
</style>

A regra input[type="text"] significa: encontre elementos input em que o atributo type seja exatamente text.

O campo de senha não é selecionado porque seu tipo é password.

Use isso para formulários, links, imagens e outros elementos em que o atributo diz que tipo de elemento ele é.

Seletor universal

O seletor universal seleciona todos os elementos.

Sintaxe:

<h1>Título</h1>
<p>Texto do parágrafo</p>
<button>Clique aqui</button>

<style>
  * {
    color: blue;
  }
</style>

A regra * significa: selecione todos os elementos da página.

Use com cuidado. Ele é comum em pequenas regras de reset ou estilos básicos simples, mas pode afetar mais elementos do que você espera.

Erros comuns de iniciantes

• Escrever .cardp em vez de .card p. .cardp procura uma classe chamada cardp. .card p procura um parágrafo dentro de .card.
• Usar > quando o elemento não é um filho direto. O seletor filho olha apenas um nível abaixo.
• Usar + quando o elemento não vem imediatamente depois. O seletor de irmão adjacente seleciona apenas o próximo irmão correspondente.
• Usar + ou ~ para elementos que não compartilham o mesmo pai. Seletores de irmãos só funcionam entre irmãos.
• Usar * demais. O seletor universal pode deixar seu CSS mais difícil de prever em páginas maiores.

Mini tarefa

Veja este HTML:

<div class="box">
  <h2>Meu título</h2>
  <a href="https://example.com">Clique aqui</a>
</div>

<style></style>

Escreva uma regra CSS com um seletor descendente que deixe o link dentro de .box laranja.

Resposta:

Quiz rápido

Pergunta 1: Qual símbolo é usado para o seletor de filho direto?

Resposta: O símbolo de maior que >.

Pergunta 2: Qual seletor seleciona todos os elementos da página?

Resposta: O seletor universal *.

Pergunta 3: Qual é a diferença entre + e ~?

Resposta: + seleciona apenas o próximo irmão. ~ seleciona todos os irmãos correspondentes que vêm depois.

Pequeno desafio

Tente estilizar este card de formulário:

• Use um seletor filho para deixar cinza o texto do parágrafo direto.
• Use um seletor de atributo para dar uma borda cinza ao campo de texto.
• Use um seletor de irmão adjacente para deixar o texto do botão em negrito.

<div class="login-card">
  <p>Faça login abaixo.</p>
  <input type="text" placeholder="Usuário" />
  <button>Entrar</button>
</div>

<style>
  /* 1. Estilize o parágrafo direto */

  /* 2. Estilize o campo de texto */

  /* 3. Estilize o botão depois do input */
</style>

Uma resposta possível:

Resumo

• O seletor descendente usa um espaço e seleciona elementos aninhados.
• O seletor filho > seleciona apenas filhos diretos.
• O seletor de irmão adjacente + seleciona o próximo irmão.
• O seletor de irmão geral ~ seleciona irmãos correspondentes que vêm depois.
• Seletores de atributo apontam para elementos pelos atributos HTML.
• O seletor universal * seleciona todos os elementos.

Aulas relacionadas

• Sintaxe CSS e seletores básicos
• Especificidade, cascata e herança em CSS
• Display e posicionamento em CSS