Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
counter-increment
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété counter-increment est utilisée afin d'augmenter la valeur d'un compteur CSS d'une valeur donnée.
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">Counter value:</div>
</section>
#default-example {
text-align: left;
counter-reset: example-counter;
}
#example-element::after {
content: counter(example-counter);
}
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
aetz(sensible à la casse), de nombres compris entre0et9, 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 êtrenone,unset,initialouinheritquelque 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.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |
Syntaxe formelle
counter-increment =
[ <counter-name> <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
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # increment-set |
Compatibilité des navigateurs
Chargement...
Voir aussi
- Utiliser les compteurs CSS
counter-resetcounter-set@counter-style- Les fonctions CSS
counter()etcounters()