La propriétéCSScounter-increment permet d'incrémenter ou de décrémenter la valeur des compteurs nomméscompteurs CSS selon les valeurs définies, ou d'empêcher la modification de tous les compteurs ou de la valeur d'un compteur individuel.

Si un compteur nommé dans la liste des compteurs et valeurs séparés par des espaces n'existe pas, il sera créé. Si aucune valeur n'est fournie pour un compteur dans la liste, le compteur sera augmenté de1.

La valeur du compteur peut être réinitialisée à n'importe quel entier avec la propriété CSScounter-reset.

Exemple interactif

counter-increment: example-counter;

counter-increment: example-counter 0;

counter-increment: example-counter 5;

counter-increment: example-counter -5;

<section>  <div>    Valeur du compteur&nbsp;:  </div></section>

#default-example {  text-align: left;  counter-reset: example-counter;}#example-element::after {  content: counter(example-counter);}

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: revert;counter-increment: revert-layer;counter-increment: unset;

Valeurs

La propriétécounter-increment accepte comme valeur soit une liste de noms de compteurs séparés par des espaces, définis comme<custom-ident> (identifiant personnalisé) avec une valeur<integer> (entier) optionnelle, soit le mot-clénone. Vous pouvez définir autant de compteurs à incrémenter que vous le souhaitez, chaque nom ou paire nom-nombre étant séparé par un espace.

<custom-ident>

Le nom du compteur qu'on souhaite incrémenter ou décrémenter.

<integer>

Définit la valeur à ajouter au compteur. Si l'entier est précédé d'un signe-, la valeur sera retirée du compteur. La valeur par défaut est1 si aucune valeur n'est définie.

none

Indique qu'aucun compteur ne doit être incrémenté ou décrémenté. Cette valeur peut aussi servir à annuler l'incrémentation ou la décrémentation de tous les compteurs dans des règles plus spécifiques. Il s'agit de la valeur par défaut de la propriété.

Définition formelle

Syntaxe formelle

counter-increment =
[<counter-name><integer>?]+|
none

<counter-name> =
<custom-ident>

<integer> =
<number-token>

Exemples

Diminuer la valeur du compteur

Dans cet exemple, vous affichez une séquence de nombres en comptant à rebours. Pour cela, vous utilisez un compteur pour afficher des nombres en partant de 100 et en diminuant de 7 à chaque fois.

HTML

<div>  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i  ><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i  ><i></i><i></i><i></i><i></i><i></i><i></i></div>

CSS

Nous définissons la valeur initiale du compteur nommésevens à100 aveccounter-reset. Ensuite, pour chaque<i>, nous diminuons le compteur de7.

Pour que le premier compte soit à100, nous ciblons le premier élément<i> avec la pseudo-classe:first-of-type et nous définissonscounter-increment: none;. De plus, la propriétécontent est utilisée dans le pseudo-élément::before pour afficher la valeur du compteur avec la fonctioncounter().

div {  counter-reset: sevens 100;}i {  counter-increment: sevens -7;}i:first-of-type {  counter-increment: none;}i::before {  content: counter(sevens);}

div {  display: flex;  flex-direction: column;  flex-wrap: wrap;  height: 300px;  width: 200px;}i {  flex: 0 0 2em;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés de compteurcounter-set,counter-reset
• La règle de compteur@counter-style
• Les fonctions de compteurcounter(),counters()
• La guided'utilisation des compteurs CSS
• Le moduledes listes et compteurs CSS
• Le moduledes styles de compteur CSS