Propriété CSS `counter-increment`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Voir la compatibilité complète
En savoir plus

La propriété CSS counter-increment permet d'incrémenter ou de décrémenter la valeur des compteurs nommés compteurs 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é de 1.

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

Exemple interactif

counter-increment: chapter-count;

counter-increment: chapter-count 0;

counter-increment: chapter-count 5;

counter-increment: chapter-count -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Les aventures d'Alice au pays des merveilles</h1>
    <h2>Dans le terrier du lapin</h2>
    <h2 id="example-element">La mare des larmes</h2>
    <h2>Une course caucus et une longue histoire</h2>
    <h2>Le lapin envoie un petit Bill</h2>
  </div>
</section>

#default-example {
  text-align: left;
  counter-reset: chapter-count;
}

#example-element {
  background-color: lightblue;
  color: black;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapitre " counter(chapter-count) ": ";
}

Syntaxe

css

/* 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;

/* Ne pas incrémenter/décrémenter : utilisé pour remplacer des 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

Cette propriété est définie sous la forme d'une liste de valeurs <custom-ident> séparées par des espaces, chacune pouvant être suivie d'un <integer> ou du mot-clé none :

<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 est retirée du compteur. La valeur par défaut est 1 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é.

Note : L'utilisation de la valeur none empêche tous les compteurs d'être incrémentés ou décrémentés pour les éléments sélectionnés où cette règle s'applique. Pour empêcher uniquement certains compteurs d'être incrémentés ou décrémentés, définissez la valeur integer à 0 sur les compteurs concernés.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	comme défini
Type d'animation	par type de valeur calculée

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

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 avec counter-reset. Ensuite, pour chaque <i>, nous diminuons le compteur de 7.

Pour que le premier compte soit à 100, nous ciblons le premier élément <i> avec la pseudo-classe :first-of-type et nous définissons counter-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 fonction counter().

css

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

Spécification
CSS Lists and Counters Module Level 3 # increment-set

Compatibilité des navigateurs

Voir aussi

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

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 3 sept. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Propriété CSS counter-increment

HTML

CSS

Résultat

Aider à améliorer MDN

Propriété CSS `counter-increment`