counter-increment

Exemple interactif

counter-increment: example-counter;

counter-increment: example-counter 0;

counter-increment: example-counter 5;

counter-increment: example-counter -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Valeur du compteur&nbsp;:
  </div>
</section>

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

#example-element::after {
  content: counter(example-counter);
}

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: revert;
counter-increment: revert-layer;
counter-increment: unset;

Valeurs

La propriété counter-increment accepte comme valeur soit une liste de noms de compteurs séparés par des espaces, définis comme <custom-ident> (identifiant personnalisé) avec une valeur <integer> (entier) optionnelle, soit le mot-clé none. Vous pouvez définir autant de compteurs à incrémenter que vous le souhaitez, chaque nom ou paire nom-nombre étant séparé par un espace.

<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 sera 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é.

Définition formelle

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

<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().

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

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