Counter-reset - Trucchi CSS | CSS Almanac 2025

La counter-resetproprietà consente la numerazione automatica degli elementi. Come un elenco ordinato (

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

La counter-resetproprietà viene utilizzata per reimpostare un contatore CSS su un determinato valore.

Fa parte del modulo contatore CSS che fa parte del contenuto generato, della numerazione automatica ed elenca le specifiche CSS2.1, estese nelle specifiche CSS3 del modulo dei contenuti generati e sostituiti.

Sintassi

counter-reset: ( ?)+ | none

Dove…

è il nome del contatore che desideri reimpostare
è il valore su cui reimpostare il contatore
none disabilitare il contatore

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

Nota: il valore predefinito per il numero intero è 0. Se nessun numero intero è impostato dopo il nome del contatore, verrà reimpostato a 0. Pertanto, funziona come previsto:

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

Puoi reimpostare più contatori contemporaneamente con un elenco separato da spazi, ognuno con il suo valore specifico, se lo desideri.

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

Questo verrà ripristinato my-awesome-countera 5 e my-other-counteral valore predefinito: 0.

Si può vedere questa lista come: counter1 value1 counter2 value2 counter3 value3… . Se un valore viene omesso, è 0.

Demo

Nella demo seguente, articlereimposta il sectioncontatore al valore predefinito (0), che viene quindi incrementato ad ogni occorrenza di sezione, quindi visualizzato davanti alle intestazioni di sezione.