Propriedade Counter Reset
Última atualização: 2026-09-13
counter-reset Propriedade Counter Reset
counter-reset cria um novo contador CSS e o inicializa com o valor dado (0 por padrão). É o primeiro passo da numeração automática e geralmente é definido em um elemento pai. Combinado com counter-increment e a função counter() do content, pode produzir sistemas de numeração multinível complexos.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
counter-reset: none | <counter-name> <integer>?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Não redefinir |
<counter-name> <integer>? | Valor | Nome do contador e valor inicial |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| counter-reset | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： counter-reset é tipicamente definido no pai de uma lista numerada; cada pai cria um escopo de contador independente.
❓ Perguntas Frequentes
Qcounter-reset pode redefinir um contador existente?
ASim. counter-reset define o contador nomeado com o valor dado (0 por padrão). Em estruturas aninhadas, todo elemento que declara counter-reset cria uma nova instância de contador que sombreia o valor do pai, dando a cada seção numeração independente. Se você pular o reset, a numeração continua do escopo pai.
QComo fazer a numeração começar em 10?
AUse counter-reset: myCounter 9; para definir o valor inicial como 9; então counter-increment: myCounter incrementa de 1 em 1, e o primeiro elemento exibe 10. O valor inicial mais um é o que o primeiro elemento mostra, porque o incremento ocorre antes da exibição — um detalhe de 'erro de um' fácil de perder.
QO que executa primeiro, counter-reset ou counter-increment?
ANo mesmo elemento, a especificação diz que counter-increment é processado antes de counter-reset. Na prática, raramente compartilham um elemento: o pai reseta para inicializar, os filhos incrementam e o content exibe o valor. Saber a ordem de processamento ajuda a evitar que os contadores se desviem do esperado em estruturas aninhadas.
QO que faz counter-reset: none?
Anone significa não redefinir nenhum contador, então os contadores mantêm o valor atual do escopo pai — útil quando você quer que a numeração continue entre elementos. Como declarar counter-reset em um elemento normalmente cria uma nova instância (na prática zerando-a), escrever none diz explicitamente 'não redefina', permitindo que vários blocos se numerem em sequência.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade counter-increment
Incrementa contadores
Propriedade content
Exibe valores de contador com counter()
