Docs executáveis de CSS: Seletores CSS

Q: O que é um seletor CSS?

É a parte de uma regra CSS antes do { que diz a quais elementos as declarações se aplicam. Em p.note { color: blue; }, o seletor p.note seleciona todo com a classe note.

Q: Qual a diferença entre espaço e > em um seletor CSS?

O espaço é o combinador descendente: nav a seleciona todo link em qualquer lugar dentro de um nav, em qualquer profundidade. O > é o combinador de filho: nav > a seleciona só os links cujo pai direto é o nav.

Q: O que significa + no CSS?

é o combinador de irmão adjacente. h2 + p seleciona um que vem logo depois de um com o mesmo pai. O ~ é mais amplo: h2 ~ p seleciona todos os irmãos que vêm depois.

Q: Como selecionar elementos pelo atributo no CSS?

Coloque o atributo entre colchetes: [disabled] seleciona elementos que o têm, [type="email"] um valor exato, [href^="https"] um valor que começa com um texto, [href$=".pdf"] um que termina com ele e [class*="btn"] um que o contém.

Q: O CSS consegue selecionar o elemento pai?

Sim, com a pseudo-classe :has(), suportada nas versões atuais de Chrome, Firefox e Safari. li:has(> a.active) seleciona os itens de lista que contêm diretamente um link ativo.

O que é um seletor CSS

O seletor é a parte da regra antes das chaves. Ele decide a quais elementos as declarações se aplicam.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

Os cinco seletores básicos cobrem a maior parte das folhas de estilo reais:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Tipos de seletor em resumo

Seletor	Exemplo	Seleciona
Universal	`*`	Todos os elementos
Tipo	`p`	Todo `<p>`
Classe	`.tip`	Elementos com `class="tip"` (entre outras)
ID	`#main-title`	O elemento com `id="main-title"`
Atributo	`[type="email"]`	Elementos cujo atributo combina
Pseudo-classe	`a:hover`, `li:first-child`	Elementos em um estado ou posição
Pseudo-elemento	`p::first-line`, `.x::before`	Uma parte de um elemento
Grupo	`h1, h2, h3`	Qualquer coisa que combine com um da lista
Composto	`p.tip`	Um `<p>` que também tem a classe

Classes e IDs têm página própria, seletor de classe CSS. Pseudo-classes como :nth-child() e :not() estão na página de pseudo-classes.

Combinadores: descendente vs filho

Um combinador une dois seletores pela relação entre eles na árvore do HTML. Existem quatro.

Combinador	Sintaxe	Seleciona `B` quando
Descendente	`A B` (espaço)	B está em qualquer lugar dentro de A
Filho	`A > B`	O pai de B é A
Irmão adjacente	`A + B`	B vem logo depois de A, mesmo pai
Irmão geral	`A ~ B`	B vem em algum ponto depois de A, mesmo pai

O espaço e o > são a dupla que mais se confunde. O seletor descendente alcança qualquer profundidade; o seletor de filho para em um nível:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Combinadores de irmão: + e ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Irmãos só olham para frente. Não existe combinador de "irmão anterior", mas o :has() consegue expressar isso: h2:has(+ p) seleciona um h2 seguido diretamente por um p.

Seletores de atributo

Os colchetes selecionam por atributos e seus valores:

Seletor	Seleciona
`[disabled]`	Tem o atributo, qualquer valor
`[type="email"]`	O valor é exatamente `email`
`[href^="https"]`	O valor começa com `https`
`[href$=".pdf"]`	O valor termina com `.pdf`
`[class*="icon"]`	O valor contém `icon` em qualquer posição
`[lang\|="en"]`	O valor é `en` ou começa com `en-`
`[data-state="open" i]`	Valor exato, ignorando maiúsculas e minúsculas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

Seletores de atributo em atributos data-* são um jeito limpo de estilizar um estado que o JavaScript define, sem inventar nomes de classe.

Teste qualquer seletor

Digite um seletor na caixa. Todo elemento selecionado ganha um contorno âmbar, e a contagem aparece embaixo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Experimente #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Composto vs descendente: o espaço importa

p.note e p .note diferem por um espaço e significam coisas diferentes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Como os navegadores leem seletores

Quando várias regras selecionam o mesmo elemento e definem a mesma propriedade, vence o seletor mais específico e, em empate, o posterior. Um ID pesa mais que qualquer quantidade de classes, e uma classe pesa mais que qualquer quantidade de seletores de tipo; a página sobre !important traz a tabela completa de especificidade.

Um grupo tem uma pegadinha: se qualquer seletor de uma lista simples for inválido, a regra inteira é descartada. Em a, b:unknown { } nem os links são estilizados. Envolver a lista em :is() a torna tolerante, então :is(a, b:unknown) continua estilizando os links.

Erros comuns

Esquecer o ponto ou o hash. tip { } mira um elemento <tip>, não class="tip". Escreva .tip.
Espaço em um seletor composto. p .note não é p.note.
Esperar que > alcance os netos. Use um espaço para qualquer profundidade.
Um erro de digitação quebra o grupo inteiro. Em h1, h2:hovr, h3 nada é estilizado.
Seletores longos demais. body div.wrapper ul li a é lento de ler e difícil de sobrescrever. Uma única classe costuma bastar.

Perguntas frequentes

O que é um seletor CSS?

É a parte de uma regra CSS antes do { que diz a quais elementos as declarações se aplicam. Em p.note { color: blue; }, o seletor p.note seleciona todo <p> com a classe note.

Qual a diferença entre espaço e > em um seletor CSS?

O espaço é o combinador descendente: nav a seleciona todo link em qualquer lugar dentro de um nav, em qualquer profundidade. O > é o combinador de filho: nav > a seleciona só os links cujo pai direto é o nav.

O que significa + no CSS?

+ é o combinador de irmão adjacente. h2 + p seleciona um <p> que vem logo depois de um <h2> com o mesmo pai. O ~ é mais amplo: h2 ~ p seleciona todos os irmãos <p> que vêm depois.

Como selecionar elementos pelo atributo no CSS?

Coloque o atributo entre colchetes: [disabled] seleciona elementos que o têm, [type="email"] um valor exato, [href^="https"] um valor que começa com um texto, [href$=".pdf"] um que termina com ele e [class*="btn"] um que o contém.

O CSS consegue selecionar o elemento pai?

Sim, com a pseudo-classe :has(), suportada nas versões atuais de Chrome, Firefox e Safari. li:has(> a.active) seleciona os itens de lista que contêm diretamente um link ativo.

Conceitos relacionados