Counter-reset - Astuces CSS | CSS Almanach 2025

La counter-resetpropriété permet la numérotation automatique des éléments. Comme une liste ordonnée (

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

La counter-resetpropriété est utilisée pour réinitialiser un compteur CSS à une valeur donnée.

Il fait partie du module de compteur CSS qui fait partie du contenu généré, de la numérotation automatique et de la spécification CSS2.1, étendue dans la spécification CSS3 du module de contenu généré et remplacé.

Syntaxe

counter-reset: ( ?)+ | none

Où…

est le nom du compteur que vous souhaitez réinitialiser
est la valeur sur laquelle réinitialiser le compteur
none désactiver le compteur

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

Remarque: la valeur par défaut de l'entier est 0. Si aucun entier n'est défini après le nom du compteur, il sera remis à 0. Ainsi, cela fonctionne comme prévu:

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

Vous pouvez réinitialiser plusieurs compteurs à la fois avec une liste séparée par des espaces, chacun avec sa valeur spécifique si vous le souhaitez.

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

Cela sera réinitialisé my-awesome-counterà 5 et my-other-counterà la valeur par défaut: 0.

Vous pouvez voir cette liste comme suit counter1 value1 counter2 value2 counter3 value3… :. Si une valeur est omise, c'est 0.

Démo

Dans la démonstration suivante, articleréinitialise le sectioncompteur à sa valeur par défaut (0), qui est ensuite incrémentée à chaque occurrence de section, puis affichée devant les en-têtes de section.