counter-set
Baseline
2023
Newly available
Depuis December 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La propriété CSS counter-set permet d'attribuer des valeurs aux compteurs CSS sur l'élément.
Si les compteurs n'existent pas, la propriété counter-set crée un nouveau compteur pour chaque compteur nommé dans la liste des paires compteur et valeur séparées par des espaces. Cependant, pour créer un nouveau compteur, il est recommandé d'utiliser la propriété CSS counter-reset.
Si un compteur nommé dans la liste n'a pas de valeur, la valeur du compteur sera définie à 0.
Note :
La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS counter-increment.
Exemple interactif
counter-set: none;
counter-set: chapter-count 0;
counter-set: chapter-count;
counter-set: chapter-count 5;
counter-set: chapter-count -5;
<section class="default-example" id="default-example">
<div class="transition-all" id="chapters">
<h1>Les aventures d'Alice au pays des merveilles</h1>
<h2>Dans le terrier du lapin</h2>
<h2 id="example-element">La mare de larmes</h2>
<h2>Une course cocasse et une longue histoire</h2>
<h2>Le lapin apporte une petite facture</h2>
</div>
</section>
#default-example {
text-align: left;
counter-set: chapter-count;
}
#example-element {
background-color: #37077c;
color: white;
}
h2 {
counter-increment: chapter-count;
font-size: 1em;
}
h2::before {
content: "Chapitre " counter(chapter-count) " : ";
}
Syntaxe
/* Définir "mon-compteur" avec la valeur 0 */
counter-set: mon-compteur;
/* Définir "mon-compteur" avec la valeur -1 */
counter-set: mon-compteur -1;
/* Définir "compteur1" avec 1 et "compteur2" à 4 */
counter-set: compteur1 1 compteur2 4;
/* Réinitialiser les compteurs qui auraient été définis avec des règles moins spécifiques */
counter-set: none;
/* Valeurs globales */
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: revert-layer;
counter-set: unset;
La propriété counter-set est définit avec l'une de ces deux valeurs :
- Une valeur de type
<custom-ident>qui fournit le nom du compteur, éventuellement suivie d'un entier (<integer>). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace. - Le mot-clé
none.
Valeurs
<custom-ident>-
Le nom du compteur à définir ou à modifier.
<integer>-
La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera
0. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur. none-
Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration
counter-setd'une règle moins spécifique.
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-set =
[ <counter-name> <integer>? ]+ |
none
<counter-name> =
<custom-ident>
<integer> =
<number-token>
Exemples
Définir des compteurs nommés
h1 {
counter-set: chapitre section 1 page;
/* Les compteurs "chapitre" et "page" sont
définis à 0, et le compteur "section"
est défini à 1. */
}
Spécifications
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # propdef-counter-set |
Compatibilité des navigateurs
Voir aussi
- Utiliser des compteurs CSS
- La propriété
counter-increment - La propriété
counter-reset - La règle
@counter-style - Les fonctions
counter()etcounters() - La propriété
content - Le pseudo-élément
::marker - Le module des listes et compteurs CSS
- Le module des styles de compteur CSS