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.

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

Syntaxe

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

Compatibilité des navigateurs

[1] Vraisemblablement implémentée depuis Safari 3.0.

Voir aussi

• Utiliser les compteurs CSS
• counter-reset