La propriété counter-reset permet de réinitialiser un compteur CSS avec une valeur donnée.

Note : Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS counter-increment.

Syntaxe

/* On réinitialise nom-compteur à 0 */
counter-reset: nom-compteur;

/* On réinitialise nom-compteur à -1 */
counter-reset: nom-compteur -1;

/* On initialise compteur1 à 1 et compteur2 à 4 */
counter-reset: compteur1 1 compteur2 4;

/* On annule toute réinitialisation qui aurait 
   pu être déclarée avec des règles moins spé-
   cifiques */
counter-reset: none;

/* Valeurs globales */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;

Cette propriété se définit grâce à :

  • un identifiant (<custom-ident>) qui représente le compteur, éventuellement suivi par un entier (<integer>). Cela peut être répété plusieurs fois avec un espace en tant que séparateur.
  • ou grâce au mot-clé none.

Valeurs

<custom-ident>
Le nom du compteur qu'on souhaite incrémenter. L'identifiant peut se composer d'une combinaison de lettres entre a et z (sensible à la casse), de nombres compris entre 0 et 9, de tirets bas (_ ou underscores) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être none, unset, initial ou inherit quelque soit la combinaison de la casse.
<integer>
La valeur avec laquelle on souhaite réinitialiser le compteur pour chaque occurrence de l'élément. La valeur par défaut est 0.
none
Un mot-clé indiquant qu'il ne faut pas réinitialiser le compteur. Cette valeur peut être utilisée pour masquer des réinitialisations provenant de règles moins spécifiques.

Syntaxe formelle

[ <custom-ident> <integer>? ]+ | none

Exemples

CSS

ol {
  list-style-type: none;
  counter-reset: compteListe;
}

li::before {
  counter-increment: compteListe;
  content: counter(compteListe) " ";
}

.reinit {
  counter-reset: compteListe;
}

HTML

<ol>
  <li>Et de un</li>
  <li>Et de deux</li>
  <li>Et de trois</li>
  <li class="reinit">Et ça repart</li>
  <li>Et de deux</li>
</ol>

Résultat

Spécifications

Spécification État Commentaires
CSS Lists Module Level 3
La définition de 'counter-reset' dans cette spécification.
Version de travail Aucune modification.
CSS Level 2 (Revision 1)
La définition de 'counter-reset' dans cette spécification.
Recommendation Définition initiale.

Valeur initialenone
Applicabilitétous les éléments
Héritéenon
Médiatous
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 2Edge Support complet 12Firefox Support complet 1IE Support complet 8Opera Support complet 9.2Safari Support complet 3.1WebView Android Support complet 2Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 25Opera Android Support complet 10Safari iOS Support complet 3.2Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, fscholz, Fredchat, VincentN
Dernière mise à jour par : SphinxKnight,