counter-increment
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-increment
est utilisée afin d'augmenter la valeur d'un compteur CSS d'une valeur donnée.
Exemple interactif
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.
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 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
Specification |
---|
CSS Lists and Counters Module Level 3 # increment-set |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Utiliser les compteurs CSS
counter-reset
counter-set
@counter-style
- Les fonctions CSS
counter()
etcounters()