Propriedade Counter Increment
Última atualização: 2026-09-13
counter-increment Propriedade Counter Increment
counter-increment aumenta o valor de um ou mais contadores CSS e é um dos mecanismos centrais por trás da numeração automática. Cada vez que um elemento corresponde ao seletor, o contador especificado é aumentado pelo passo dado (1 por padrão). Ele precisa de counter-reset e da função counter() do content para produzir numeração automática completa.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
counter-increment: none | <counter-name> <integer>?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Não incrementar |
<counter-name> <integer>? | Valor | Nome do contador e passo |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| counter-increment | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： counter-increment só incrementa; não exibe o valor. Combine com content: counter(name) para mostrar o número na página.
❓ Perguntas Frequentes
QQual é a diferença entre counter-increment e counter-reset?
Acounter-reset cria e inicializa um contador (define seu valor inicial, 0 por padrão), geralmente declarado no contêiner pai. counter-increment aumenta o contador cada vez que um elemento corresponde (em 1 por correspondência, por padrão), geralmente escrito nos elementos numerados. Juntos com a função counter() do content produzem numeração automática completa.
QComo criar numeração multinível como 1.1, 1.2?
AUse dois níveis de contador: um counter-reset: chapter externo com counter-increment, e um counter-reset: section interno com counter-increment, depois exiba com content: counter(chapter) "." counter(section);. Isso gera numeração no estilo 1.1.
QO passo do counter-increment pode ser diferente de 1?
ASim. counter-increment: myCounter 2; incrementa de 2 em 2; omitir o número usa o padrão 1. Você também pode incrementar vários contadores de uma vez, por exemplo counter-increment: a 1 b 2;, e valores negativos também funcionam. Lembre-se de que só muda o valor do contador — é preciso exibi-lo com counter() no content para ver os números.
QOs contadores se confundem em listas aninhadas?
ANão. Os contadores CSS têm escopo: declarar counter-reset em um elemento cria uma nova instância de contador que sombreia a do pai, então as listas filhas recomeçam do valor inicial. Por exemplo, cada <ol> que reseta seu contador produz numeração independente das outras. Para continuar a numeração, pule o reset ou use counters() para exibir o caminho hierárquico completo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade counter-reset
Cria e inicializa contadores
Propriedade content
Exibe valores de contador com counter()
