Docs executáveis de CSS: Pseudo-classes

Q: Como funciona o nth-child no CSS?

:nth-child(an+b) seleciona elementos cuja posição entre os irmãos é a×n+b para n = 0, 1, 2 e assim por diante, contando a partir de 1. :nth-child(3) é o terceiro filho, :nth-child(odd) ou 2n+1 todos os ímpares, e :nth-child(n+4) do quarto em diante.

Q: Qual a diferença entre nth-child e nth-of-type?

:nth-child() conta todos os elementos irmãos e depois confere o resto do seletor; :nth-of-type() conta só os irmãos do mesmo tipo de elemento. Em uma lista com um h2 seguido de parágrafos, p:nth-child(1) não seleciona nada, enquanto p:nth-of-type(1) seleciona o primeiro parágrafo.

Q: Como usar :not() no CSS?

Coloque o seletor a excluir dentro dos parênteses: li:not(.done) seleciona todo item de lista sem a classe done. Ele aceita uma lista também, input:not([type="checkbox"], [type="radio"]).

Q: Qual a diferença entre pseudo-classe e pseudo-elemento?

Uma pseudo-classe (um dois-pontos, :hover) seleciona um elemento existente inteiro em algum estado. Um pseudo-elemento (dois dois-pontos, ::before) mira uma parte de um elemento ou cria conteúdo gerado.

O que é uma pseudo-classe

Uma pseudo-classe é uma palavra-chave depois de dois-pontos que seleciona elementos pela posição no documento ou pelo estado. Você a acrescenta a um seletor normal: li:first-child, input:focus, a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

As pseudo-classes de estado para links e mouse (:hover, :active, :visited) têm página própria, hover no CSS.

:nth-child() e a fórmula an+b

:nth-child() recebe um número, uma palavra-chave ou uma fórmula an+b. O navegador testa n = 0, 1, 2, ... e seleciona cada posição que a fórmula produz (as posições começam em 1).

Fórmula	Posições selecionadas	Significado
`3`	3	O terceiro filho
`odd` ou `2n+1`	1, 3, 5, ...	Linhas ímpares
`even` ou `2n`	2, 4, 6, ...	Linhas pares
`3n`	3, 6, 9, ...	Um a cada três
`n+4`	4, 5, 6, ...	Do quarto em diante
`-n+3`	1, 2, 3	Os três primeiros
`3n+1`	1, 4, 7, ...	Um a cada três, começando no primeiro

Digite uma fórmula e veja quais itens são selecionados:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Experimente odd, even, 4, n+7, -n+5 e 2n+3. Uma fórmula inválida não seleciona nada.

A versão que conta a partir do fim é :nth-last-child(): li:nth-last-child(-n+2) seleciona os dois últimos itens.

nth-child vs nth-of-type

:nth-child() conta todo elemento irmão, seja qual for a tag, e só depois confere o resto do seletor. :nth-of-type() conta só os irmãos com a mesma tag. A diferença aparece assim que os irmãos são misturados:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

Os mesmos pares existem para as pontas: :first-child / :first-of-type, :last-child / :last-of-type, :only-child / :only-of-type.

:not(), :is() e :where()

Pseudo-classe	Exemplo	Seleciona
`:not(X)`	`li:not(.done)`	Elementos que não combinam com X
`:is(X, Y)`	`:is(h1, h2, h3) a`	Elementos que combinam com qualquer item da lista
`:where(X, Y)`	`:where(ul, ol) li`	Igual a `:is()`, com especificidade zero
`:has(X)`	`li:has(> input:checked)`	Elementos que contêm algo que combina com X

:not() é a de uso diário, por exemplo para colocar um separador entre os itens, mas não depois do último:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

Pseudo-classes de estado: focus, checked, disabled, invalid

Pseudo-classe	Seleciona
`:focus`	O elemento que tem o foco do teclado ou do mouse
`:focus-visible`	Com foco, e o navegador decide que o anel deve aparecer (normalmente foco pelo teclado)
`:focus-within`	Um elemento que contém o elemento com foco
`:checked`	Um checkbox ou radio marcado, ou um `<option>` selecionado
`:disabled` / `:enabled`	Controles de formulário desabilitados (ou não)
`:required` / `:optional`	Inputs com ou sem `required`
`:invalid` / `:valid`	Inputs cujo valor falha ou passa na validação
`:user-invalid`	Inválido, mas só depois que o usuário interagiu com ele
`:placeholder-shown`	Um input que está mostrando o placeholder
`:empty`	Um elemento sem filhos, nem mesmo texto
`:target`	O elemento cujo id combina com o `#fragment` da URL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

Clique no campo de e-mail: o label fica azul graças ao :focus-within. Digite algo que não seja um e-mail e saia do campo: o :user-invalid deixa a borda âmbar. O :invalid simples teria marcado de âmbar o campo obrigatório vazio antes mesmo de você tocá-lo.

Faça o que fizer com :focus, mantenha um estilo de foco visível. Remover o outline sem colocar outra coisa no lugar deixa quem usa teclado sem saber onde está.

:has(), o seletor de pai

:has() seleciona um elemento pelo que ele contém. É o "seletor de pai" pedido há anos, e funciona nas versões atuais de Chrome, Firefox e Safari.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

Escolha o outro plano: o card inteiro acompanha o botão de rádio, sem JavaScript.

Erros comuns

Espaço antes dos dois-pontos. li :first-child significa "um primeiro filho dentro de um li". Escreva li:first-child.
Achar que p:nth-child(1) quer dizer "o primeiro p". Quer dizer "o primeiro filho, se ele for um p". Use :first-of-type para o primeiro p.
Contar a partir de 0. As posições começam em 1: :nth-child(0) não seleciona nada.
Remover o outline de foco. :focus { outline: none } sem substituto quebra a navegação por teclado.
Confundir : e ::. :before é uma grafia antiga do pseudo-elemento ::before; pseudo-classes sempre usam um dois-pontos.

Perguntas frequentes

O que é uma pseudo-classe no CSS?

Uma palavra-chave depois de dois-pontos que seleciona elementos pelo estado ou pela posição, e não pelo nome, como a:hover, li:first-child ou input:focus. Ela é acrescentada a um seletor normal, e a maioria das pseudo-classes conta como uma classe na especificidade (:where() conta zero).

Como funciona o nth-child no CSS?

:nth-child(an+b) seleciona elementos cuja posição entre os irmãos é a×n+b para n = 0, 1, 2 e assim por diante, contando a partir de 1. :nth-child(3) é o terceiro filho, :nth-child(odd) ou 2n+1 todos os ímpares, e :nth-child(n+4) do quarto em diante.

Qual a diferença entre nth-child e nth-of-type?

:nth-child() conta todos os elementos irmãos e depois confere o resto do seletor; :nth-of-type() conta só os irmãos do mesmo tipo de elemento. Em uma lista com um h2 seguido de parágrafos, p:nth-child(1) não seleciona nada, enquanto p:nth-of-type(1) seleciona o primeiro parágrafo.

Como usar :not() no CSS?

Coloque o seletor a excluir dentro dos parênteses: li:not(.done) seleciona todo item de lista sem a classe done. Ele aceita uma lista também, input:not([type="checkbox"], [type="radio"]).

Qual a diferença entre pseudo-classe e pseudo-elemento?

Uma pseudo-classe (um dois-pontos, :hover) seleciona um elemento existente inteiro em algum estado. Um pseudo-elemento (dois dois-pontos, ::before) mira uma parte de um elemento ou cria conteúdo gerado.

Conceitos relacionados