Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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 initialenone
Applicabilitétous les éléments
Héritéenon
Médiatous
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'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.

Compatibilité des navigateurs

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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, FredB, Fredchat, VincentN
 Dernière mise à jour par : SphinxKnight,