Counter-reset - CSS-Tricks | CSS Almanac 2025

A counter-resetpropriedade permite a numeração automática de elementos. Como uma lista ordenada (

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

A counter-resetpropriedade é usada para redefinir um contador CSS para um determinado valor.

É parte do módulo contador CSS que faz parte do conteúdo gerado, numeração automática e lista a especificação CSS2.1, estendida na especificação CSS3 do Módulo de Conteúdo Gerado e Substituído.

Sintaxe

counter-reset: ( ?)+ | none

Onde…

é o nome do contador que você deseja zerar
é o valor para redefinir o contador para
none desabilite o contador

body ( counter-reset: my-awesome-counter 0; )

Nota: o valor padrão para o número inteiro é 0. Se nenhum número inteiro for definido após o nome do contador, ele será redefinido como 0. Portanto, isso funciona como esperado:

body ( counter-reset: my-awesome-counter; )

Você pode zerar vários contadores de uma vez com uma lista separada por espaços, cada um com seu valor específico, se desejar.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Isso será redefinido my-awesome-counterpara 5 e my-other-counterpara o valor padrão: 0.

Você pode ver esta lista como: counter1 value1 counter2 value2 counter3 value3… . Se um valor for omitido, é 0.

Demo

Na demonstração a seguir, articleredefine o sectioncontador para seu valor padrão (0), que é então incrementado a cada ocorrência de seção e, a seguir, exibido na frente dos títulos das seções.