Propriété CSS `counter-set`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis décembre 2023.

Voir la compatibilité complète
En savoir plus

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 est 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

css

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

Valeurs

Cette propriété est définie soit sous la forme d'une liste de valeurs <custom-ident> séparées par des espaces, chacune pouvant être suivie d'un <integer>, soit par le mot-clé none :

<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 est 0. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément crée un nouveau compteur avec ce nom et utilise 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-set d'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 défini
Type d'animation	par type de valeur calculée

Syntaxe formelle

counter-set = 
  [ <counter-name> <integer>? ]+  |
  none                            

<counter-name> = 
  <custom-ident>  

<integer> = 
  <number-token>

Exemples

Définir des compteurs nommés

css

h1 {
  counter-set: chapitre section 1 page;
  /* Les compteurs "chapitre" et "page" sont
     définis à 0, et le compteur "section"
     est défini à 1. */
}