Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

counter-increment

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 et z (sensible à la casse), de nombres compris entre 0 et 9, 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 être none, unset, initial ou inherit 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

[ <counter-name> <integer>? ]+ | none
où 
<counter-name> = <custom-ident>

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 initialenone
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi