counter-increment

La propriété counter-increment est utilisée afin d'augmenter la valeur d'un compteur CSS d'une valeur donnée. La valeur du compteur peut être réinitialisée grâce à la propriété counter-reset.

Valeur initiale	`none`
Applicabilité	tous les éléments
Héritée	non
Média	tous
Valeur calculée	comme spécifié
Type d'animation	discrète
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

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;

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.

Avec cette propriété, on peut manipuler autant de compteurs qu'on veut en les séparant avec un espace.

Syntaxe formelle

[ <custom-ident> <integer>? ]+ | none

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 and Counters 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.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	2.0	1.0	8.0	9.2	(Oui)^[1]

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	?	?	?	?	?

[1] This feature is probably implemented since Safari 3.0.