Skip to main content

Counter | Contadores | CSS

  • Counter | Contadores | CSS

🧮 Entendendo e Usando counter no CSS

1. Introdução​

O CSS possui um recurso chamado contadores (counter) que permite gerar numeração automática de elementos, similar ao funcionamento de listas ordenadas (<ol>), mas com muito mais controle.

Eles são extremamente úteis para:

  • Criar numeração de títulos e seções (ex: 1, 1.1, 1.2…)
  • Adicionar números automáticos em tabelas ou figuras
  • Controlar numeração de páginas em impressão (counter(page))
  • Personalizar listas com hierarquia complexa

2. Fundamentos dos Contadores​

2.1. Inicialização com counter-reset​

Cria e define o valor inicial de um contador:

body {
  counter-reset: section;
}

Isso cria um contador chamado section e o zera. Você pode criar múltiplos contadores separados por espaço:

body {
  counter-reset: section figure;
}

2.2. Incremento com counter-increment​

Cada vez que um elemento aparece, ele incrementa o contador:

h2 {
  counter-increment: section;
}

Isso soma 1 ao contador section toda vez que um <h2> aparece.

2.3. Exibição com content: counter()​

Para mostrar o valor do contador, use a propriedade content (geralmente com ::before):

h2::before {
  content: "Seção " counter(section) ": ";
}

💡 Resultado:

Seção 1: Introdução
Seção 2: Conceitos

3. Contadores Aninhados (Hierárquicos)​

Você pode criar subcontadores para seções e subseções.

body {
  counter-reset: section;
}

h2 {
  counter-increment: section;
  counter-reset: subsection;
}

h3 {
  counter-increment: subsection;
}

h2::before {
  content: counter(section) ". ";
}

h3::before {
  content: counter(section) "." counter(subsection) " ";
}

💡 Resultado:

1. Introdução  
1.1. Contexto  
1.2. Objetivos  
2. Metodologia  
2.1. Coleta de dados

4. Formatos de Numeração​

O counter() aceita diferentes estilos:

content: counter(section, upper-roman);
EstiloExemplo
decimal1, 2, 3
upper-romanI, II, III
lower-romani, ii, iii
upper-alphaA, B, C
lower-alphaa, b, c

Também é possível combinar texto:

content: "Capítulo " counter(chapter, upper-roman) ": ";

5. Contadores Especiais para Impressão​

Quando se trabalha com CSS de impressão ou ferramentas como Paged.js, alguns contadores vêm pré-definidos, como:

content: "Página " counter(page) " de " counter(pages);

🔹 counter(page) → número da página atual 🔹 counter(pages) → total de páginas

Esses contadores funcionam dentro de seletores como @page @bottom-right ou @top-center.

6. Reiniciando Contadores Manualmente​

Você pode reiniciar um contador dentro de uma seção específica:

.section {
  counter-reset: item;
}

.section li {
  counter-increment: item;
}

.section li::before {
  content: counters(item, ".") " ";
}

💡 O uso de counters() (no plural) mostra toda a hierarquia acumulada (ex: 1.1.3).

7. Boas Práticas​

✅ Use nomes descritivos (counter-reset: section, não counter-reset: c1) ✅ Resete contadores em pontos lógicos (como início de capítulos) ✅ Combine com ::before para não interferir no HTML ✅ Teste impressão se estiver usando com Paged.js ou PrinceXML ✅ Use counters() para hierarquias automáticas

8. Exemplo Completo​

<html>
  <head>
    <style>
      body {
        counter-reset: chapter;
      }

      h2 {
        counter-increment: chapter;
        counter-reset: subchapter;
      }

      h2::before {
        content: "Capítulo " counter(chapter) ": ";
      }

      h3 {
        counter-increment: subchapter;
      }

      h3::before {
        content: counter(chapter) "." counter(subchapter) " ";
      }
    </style>
  </head>
  <body>
    <h2>Introdução</h2>
    <h3>Contexto</h3>
    <h3>Objetivos</h3>
    <h2>Metodologia</h2>
    <h3>Procedimentos</h3>
  </body>
</html>

💡 Resultado:

Capítulo 1: Introdução  
1.1 Contexto  
1.2 Objetivos  
Capítulo 2: Metodologia  
2.1 Procedimentos