counter-reset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété counter-reset
permet de réinitialiser un compteur CSS avec une valeur donnée.
Exemple interactif
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
etz
(sensible à la casse), de nombres compris entre0
et9
, 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 êtrenone
,unset
,initial
ouinherit
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.
Définition formelle
Valeur initiale | none |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | by computed value type |
Syntaxe formelle
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
Specification |
---|
CSS Lists and Counters Module Level 3 # counter-reset |
Compatibilité des navigateurs
BCD tables only load in the browser