La propriété counter-reset
permet de réinitialiser un compteur CSS avec une valeur donnée.
Valeur initiale | none |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Média | tous |
Valeur calculée | comme spécifié |
Animable | non |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
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;
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.
On peut définir autant de compteurs qu'on souhaite, il faut alors les séparer par un espace.
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 and Counters 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. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | 2.0 | 1.0[1] | 8.0 | 9.2 | 3.1[1] |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | 2.1 | 25.0[1] | 10[1] | 10.0 | 3.2 |