La propriété counter-increment
est utilisée afin d'augmenter la valeur d'un compteur CSS d'une valeur donnée.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Note : La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété counter-reset
.
Syntaxe
/* On incrémente 'mon-compteur' de 1 */
counter-increment: mon-compteur;
/* On réduit 'mon-compteur' de 1 */
counter-increment: mon-compteur -1;
/* On incrémente 'compteur1' de 1 et on décrémente 'compteur2' de 4 */
counter-increment: compteur1 compteur2 -4;
/* On n'incrémente/décremente rien */
/* cela permet d'effacer les règles moins spécifiques */
counter-increment: none;
/* Valeurs globales */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;
La propriété counter-increment
peut être définie de deux façons :
- Avec le mot-clé
none
- Avec un identifiant (
<custom-ident>
) qui identifie le compteur et qui est éventuellement suivi par un entier (<integer>
). On peut définir autant de compteurs qu'on veut, chacun étant séparé par un espace.
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 qu'on souhaite ajouter au compteur. La valeur par défaut est 1 (le compteur est alors incrémenté de 1).
none
- Aucun compteur n'est incrémenté. Cette valeur est utilisée comme valeur par défaut et permet également d'annuler des incréments décrits par des règles moins spécifiques.
Syntaxe formelle
Exemples
CSS
ol {
list-style-type: none;
counter-reset: compteListe;
}
li::before {
counter-increment: compteListe 2;
content: counter(compteListe) " ";
}
HTML
<ol>
<li>Et de deux</li>
<li>Et de quatre</li>
<li>Et de six</li>
</ol>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Lists Module Level 3 La définition de 'counter-increment' dans cette spécification. |
Version de travail | Aucune modification. |
CSS Level 2 (Revision 1) La définition de 'counter-increment' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | none |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Voir aussi
- Utiliser les compteurs CSS
counter-reset
counter-set
@counter-style
- Les fonctions CSS
counter
etcounters