Propriété CSS counter-reset

Exemple interactif

counter-reset: none;

counter-reset: chapter-count 0;

counter-reset: chapter-count;

counter-reset: chapter-count 5;

counter-reset: 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-reset: chapter-count;
}

#example-element {
  background-color: lightblue;
  color: black;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapitre " counters(chapter-count, ".") " : ";
}

Syntaxe

/* Valeur avec un mot-clé */
counter-reset: none;

/* Counters réguliers avec des valeurs initiales par défaut */
counter-reset: mon-compteur;
counter-reset: autre-compteur;

/* Counters réguliers avec une valeur initiale */
counter-reset: mon-compteur -3;
counter-reset: autre-compteur 15;

/* Counters inversés */
counter-reset: reversed(mon-compteur);
counter-reset: reversed(mon-compteur) 3;
counter-reset: reversed(autre-compteur) 15;

/* Plusieurs compteurs */
counter-reset: mon-compteur -3 autre-compteur 15;
counter-reset: reversed(pages) items 1 reversed(sections) 4;

/* Valeurs globales */
counter-reset: inherit;
counter-reset: initial;
counter-reset: revert;
counter-reset: revert-layer;
counter-reset: unset;

Valeurs

Cette propriété est définie comme une liste de noms de compteurs ou de compteurs inversés séparés par des espaces, chacun pouvant être suivi d'un <integer> optionnel, ou du mot-clé none :

<custom-ident>

Définit le nom du compteur à créer et à initialiser. La notation fonctionnelle reversed() peut être utilisée pour créer un compteur inversé.

<integer>

Définit la valeur initiale à attribuer au compteur nouvellement créé. Si elle n'est pas définie, la valeur par défaut est 0 pour les compteurs réguliers. La valeur initiale des compteurs inversés est calculée automatiquement.

none

Définit qu'aucun compteur n'est créé.

Description

La propriété counter-reset peut être utilisée pour créer et initialiser des compteurs nommés ou des compteurs inversés afin de numéroter les éléments dans l'ordre croissant ou décroissant.

La valeur none peut être utilisée pour remplacer une déclaration counter-reset dans une règle ayant une spécificité inférieure.

Plusieurs noms de compteurs ou paires nom-valeur peuvent être séparés par des espaces. Pour les noms de compteurs, les compteurs réguliers utilisent le format <counter-name> et les compteurs inversés utilisent le format reversed(<counter-name>), où <counter-name> est un <custom-ident> ou list-item pour le compteur intégré <ol>.

Valeurs initiales par défaut

Déclarer des compteurs réguliers et inversés sans inclure un entier permet de mettre en œuvre les deux schémas de numérotation les plus courants : compter à partir de 1 jusqu'au nombre d'éléments et compter à rebours du nombre d'éléments jusqu'à 1, avec des incréments ou des décréments de 1. En définissant une valeur initiale pour un compteur nommé, vous pouvez modifier sa valeur de départ. L'incrément ou le décrément peut être ajusté en utilisant la propriété counter-increment.

L'exemple suivant crée trois compteurs. Les compteurs chapitre et page sont définis à la valeur initiale par défaut de 0, tandis que section est défini à 4 :

h1 {
  counter-reset: chapitre section 4 page;
}

Les compteurs inversés créés sans un <integer> ont une valeur initiale calculée automatiquement. Le navigateur compte le nombre d'éléments dans l'ensemble, la valeur initiale calculée garantissant que si la propriété counter-increment est définie sur -1, décrémentant ainsi le compteur nommé de 1 pour chaque élément, le compteur est à 1 sur le dernier élément de l'ensemble.

L'exemple suivant crée deux compteurs inversés, chapitre et section, et un compteur régulier, pages. Le compteur section commence à 10, et pages utilise la valeur initiale par défaut de 0. La valeur initiale du compteur chapitre est calculée automatiquement. Le compteur est décrémenté de 1 chaque fois qu'un <h2> est rencontré, donc sa valeur est 1 sur le dernier <h2>.

h1 {
  counter-reset: reversed(chapitre) reversed(section) 10 pages;
}
h2 {
  counter-increment: chapitre -1;
}

Compteur intégré list-item

Les listes ordonnées (<ol>) disposent de compteurs intégrés list-item qui contrôlent leur numérotation. Ces compteurs augmentent ou diminuent automatiquement de un à chaque élément de la liste. La propriété counter-reset peut être utilisée pour réinitialiser les compteurs list-item. Comme pour les autres compteurs, vous pouvez remplacer la valeur d'incrémentation par défaut des compteurs list-item en utilisant la propriété counter-increment.

Définition formelle

Syntaxe formelle

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

<counter-name> = 
  <custom-ident>  

<integer> = 
  <number-token>  

<reversed-counter-name> = 
  reversed( <counter-name> )  

Exemples

Remplacer le compteur list-item

Dans cet exemple, la propriété counter-reset est utilisée pour définir une valeur de départ pour un compteur implicite list-item.

HTML

Nous incluons une liste ordonnée (<ol>) contenant cinq éléments de liste (<li>).

<ol>
  <li>Premier</li>
  <li>Deuxième</li>
  <li>Troisième</li>
  <li>Quatrième</li>
  <li>Cinquième</li>
</ol>

CSS

Avec counter-reset, vous définissez le compteur implicite list-item pour qu'il commence à une valeur différente de la valeur par défaut 1 :

ol {
  counter-reset: list-item 3;
}

Résultat

Le premier élément est numéroté 4. Ce qui revient au même effet que d'écrire <ol start="4"> en HTML.

Utiliser un compteur inversé

Dans cet exemple, la fonction reversed() est utilisée pour créer un compteur inversé nommé priorite qui numérote cinq tâches.

HTML

Nous incluons une liste non ordonnée (<ul>) contenant cinq éléments de liste (<li>).

<ul class="stack">
  <li>Tâche A</li>
  <li>Tâche B</li>
  <li>Tâche C</li>
  <li>Tâche D</li>
  <li>Tâche E</li>
</ul>

CSS

Nous créons un compteur inversé nommé priorite sur le <ul> et supprimons les puces par défaut. Nous décrémentons le compteur de 1 sur chaque <li>. Nous utilisons ensuite du contenu généré pour afficher la valeur du compteur avant le contenu de chaque élément de liste.

.stack {
  counter-reset: reversed(priorite);
  list-style: none;
}
li {
  counter-increment: priorite -1;
}
li::before {
  content: counter(priorite) ". ";
}

@supports not (counter-reset: reversed(priorite)) {
  body::before {
    content: "Votre navigateur ne prend pas en charge la fonction `reversed()`.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Résultat

Les éléments sont numérotés dans l'ordre inverse de 5 à 1. Notez que la valeur initiale du compteur n'est pas définie. Le navigateur calcule automatiquement la valeur initiale au moment de la mise en page.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utiliser des compteurs CSS
• La propriété counter-increment
• La propriété counter-set
• La règle @counter-style
• Les fonctions counter() et counters()
• La propriété content
• Le pseudo-élément ::marker
• Le module des listes et compteurs CSS
• Le module des styles de compteur CSS