W3docs
fr
Se connecter

Propriété CSS counter-reset

Utilisez la propriété CSS counter-reset pour définir et initialiser un ou plusieurs compteurs CSS. Exemples et tutoriels sur W3docs.

La propriété counter-reset crée un ou plusieurs compteurs CSS et les initialise à une valeur de départ. Malgré son nom, son rôle principal est d'initialiser un compteur afin qu'il puisse être utilisé par la suite — elle ne se contente pas de remettre à zéro un compteur existant, elle fait exister le compteur dans la portée courante.

Les compteurs CSS sont des variables gérées par le navigateur dont les valeurs peuvent être incrémentées par des règles CSS pour suivre le nombre de fois où ils sont utilisés. Ils permettent de numéroter des sections, des chapitres, des éléments de liste ou tout élément répété entièrement en CSS, sans modification du balisage ni JavaScript.

Un compteur n'est utile qu'en tant que partie d'un trio de propriétés :

  • counter-reset — crée le compteur et lui attribue une valeur de départ (cette page).
  • counter-increment — ajoute à la valeur du compteur, généralement une fois par élément correspondant.
  • content — affiche la valeur du compteur via la fonction counter() ou counters(), généralement dans un pseudo-élément ::before.

Cette page couvre la syntaxe de counter-reset, le fonctionnement de la portée des compteurs, la numérotation des sections imbriquées, l'utilisation de valeurs de départ négatives et personnalisées, ainsi que les valeurs acceptées par la propriété.

Comment ça fonctionne

Chaque déclaration counter-reset prend un nom de compteur que vous inventez (par exemple section) suivi d'un entier optionnel comme valeur de départ :

/* "section" counter created, starts at 0 */
counter-reset: section;

/* "section" counter created, starts at 5 */
counter-reset: section 5;

/* multiple counters in one declaration */
counter-reset: chapter 0 page 1;

Si vous omettez le nombre, le compteur démarre à 0. Le premier élément correspondant exécute alors counter-increment avant que content le lise, de sorte qu'un compteur démarrant à 0 et s'incrémentant de 1 s'affiche comme 1 sur le premier élément — ce qui est généralement le résultat souhaité.

La portée est importante. Un compteur créé avec counter-reset est limité à l'élément sur lequel il est déclaré, ainsi qu'à ses descendants et aux frères suivants. C'est ce qui vous permet de réinitialiser un sous-compteur pour chaque section : placer counter-reset: subsection sur chaque h2 donne à chaque section son propre compteur subsection fraîchement initialisé. L'exemple de numérotation imbriquée ci-dessous repose sur ce comportement.

Valeur initialenone
S'applique àTous les éléments.
HéritéeNon.
AnimableNon.
VersionCSS2
Syntaxe DOMobject.style.counterReset = "section" ;

Syntaxe

counter-reset: none | name number | initial | inherit;

Le name est un identifiant de votre choix, et number est un entier optionnel (il peut être négatif). Vous pouvez lister plusieurs paires name number dans une même déclaration pour créer plusieurs compteurs à la fois.

Exemple : définir un compteur avec JavaScript

counter-reset est également accessible depuis le DOM via element.style.counterReset. Cliquez sur « Try it » pour réinitialiser le compteur section à 5, de sorte que les titres soient renumérotés à partir de 6.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Click the "Try it" button to set the counter-reset property:</p>
    <button onclick="myFunction()">Try it</button>
    <h2>HTML Tutorials</h2>
    <h2>JavaScript Tutorials</h2>
    <h2>CSS Tutorials</h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section 5";
      }
    </script>
  </body>
</html>
Essayez vous-même »

Exemple avec un incrément négatif (compte à rebours)

Les nombres négatifs sont autorisés aussi bien comme valeurs de départ que pour counter-increment. Ici, le compteur est créé à 0 et l'incrément est -1, de sorte que chaque titre compte à rebours : -1, -2, -3, -4.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* create "my-counter", start at 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* decrease "my-counter" by 1 on each h2 */
        counter-increment: my-counter -1;
        content: "Section " counter(my-counter) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>
Essayez vous-même »

Exemple avec des sections et sous-sections numérotées

C'est l'utilisation la plus courante de counter-reset dans la pratique : la numérotation imbriquée comme 1.1, 1.2, 2.1. Le compteur subsection est réinitialisé sur chaque h2, de sorte que chaque section redémarre sa numérotation de sous-section à partir de 1. Sans cette réinitialisation par h2, les sous-sections continueraient à s'incrémenter sur tout le document.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* Set "section" to 0 */
        counter-reset: section;
      }
      h2 {
        /* Set "subsection" to 0 */
        counter-reset: subsection;
      }
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ": ";
      }
      h3::before {
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h2>HTML</h2>
    <h3>HTML Basics</h3>
    <h3>HTML Templates</h3>
    <h3>HTML References</h3>
    <h3>HTML Tags</h3>
    <h2>CSS</h2>
    <h3>CSS Basics</h3>
    <h3>CSS References</h3>
    <h3>CSS Advanced</h3>
    <h3>CSS Guides</h3>
    <h3>CSS Selectors</h3>
    <h3>CSS Properties</h3>
  </body>
</html>
Essayez vous-même »

Valeurs

ValeurDescription
noneLes compteurs ne sont pas incrémentés.
name numbername définit le nom du compteur à réinitialiser. number définit la valeur à laquelle réinitialiser le compteur à chaque occurrence de l'élément. La valeur par défaut est 0 si non spécifiée.
initialDéfinit la propriété à sa valeur par défaut.
inheritHérite de la propriété depuis son élément parent.

Pièges courants

  • Rien ne s'affiche seul. counter-reset crée uniquement le compteur. Vous avez encore besoin de counter-increment pour l'avancer et de content: counter(name) pour l'afficher. Une page avec seulement counter-reset n'affiche aucun chiffre.
  • counter-reset vs counter-set. counter-reset crée un compteur dans la portée courante ; le plus récent counter-set ne fait que changer la valeur d'un compteur déjà existant et ne crée jamais de nouvelle portée. Utilisez counter-reset lorsque vous souhaitez que la numérotation recommence à l'intérieur d'une section.
  • L'incrément s'exécute avant l'affichage. Comme l'incrément sur un ::before se produit avant que content soit lu, un compteur démarrant à 0 avec +1 affiche 1 sur le premier élément. Commencez à une valeur différente si vous avez besoin d'un premier chiffre différent.
  • Les compteurs ne sont pas hérités. La valeur de la propriété n'est pas héritée, mais le compteur lui-même est visible par les descendants et les frères suivants via la portée — c'est ce qui rend possible la numérotation imbriquée.

Support des navigateurs

counter-reset fait partie de CSS2 et est pris en charge par tous les navigateurs modernes, notamment Chrome, Firefox, Safari, Edge et Opera.

Pratique

Pratique
À quoi sert la propriété CSS 'counter-reset' ?
À quoi sert la propriété CSS 'counter-reset' ?
Was this page helpful?