Contadores

No Laboratório Belavista, as notas de rodapé do folder precisam de números que o CSS controla. Contadores permitem sequências além do ol padrão.

O exemplo está em pacote de exemplos/51-contadores/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Criar contador com counter-reset e avançar com counter-increment.
• Mostrar o valor com counter() em content.
• Usar counters() em listas aninhadas.
• Não confundir counter-reset com counter-set.

Reset, increment, content

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contadores — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <article class="folder">
      <h1>Folder da exposição</h1>
      <p>O cartaz usa tipos móveis<a class="nota" href="#n1"></a>.</p>
      <p>A tinta é à base d’água<a class="nota" href="#n2"></a>.</p>
      <ol id="notas">
        <li id="n1">Exemplo fictício do ateliê.</li>
        <li id="n2">Sem químicos agressivos neste exercício.</li>
      </ol>
    </article>
  </body>
</html>

.folder {
  counter-reset: nota;
  max-width: 36rem;
}
a.nota::after {
  counter-increment: nota;
  content: "[" counter(nota) "]";
  font-size: 0.75em;
  vertical-align: super;
  margin-inline-start: 0.15em;
  color: #c45c26;
}

Mude uma coisa. Troque content para "(" counter(nota) ")". Preveja parênteses. Recarregue. Confira.

Listas aninhadas

Em ol/ul aninhados, counter() vê só o nível interno. counters(list-item, ".") junta os níveis: 1.2.3.

ol.indice li::marker {
  content: counters(list-item, ".") " ";
}

list-style-type e @counter-style mudam símbolos (romano, alfabeto, estilos customizados). Contadores manuais dão controle quando o marcador padrão não basta.

reset vs set

counter-reset: nota (opcionalmente com valor inicial) cria/reinicia o contador. counter-set altera o valor de um contador já existente sem reinventar o nome no mesmo sentido didático — no dia a dia do volume, comece por reset + increment.

Erro comum: colocar counter-increment no pai e content: counter(...) no filho sem o increment no elemento que deveria contar — o número não anda.

Contador e acessibilidade

O número gerado em ::after é visual. O link href="#n1" ainda precisa de texto ou aria-label claro se for o único conteúdo clicável. Neste exercício o ::after complementa; não invente notas com dados reais.

Arquivo no disco. Teste em 127.0.0.1. Links de nota são demonstrativos.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Onde costuma ficar o counter-reset neste padrão de notas?
2. O que counter-increment: nota faz a cada link .nota?
3. Quando preferir counters() em vez de counter()?

Respostas comentadas

1. No ancestral comum (aqui .folder ou body), antes dos elementos que incrementam.
2. Soma 1 ao contador nota (por padrão) naquele elemento.
3. Em hierarquias aninhadas, para mostrar o caminho completo dos níveis.