Propriété CSS counter-reset

❮ Précédent Suivant ❯

La propriété counter-reset permet de réinitialiser un ou plusieurs compteurs CSS à la valeur donnée. Cette propriété est généralement utilisée avec les propriétés content et counter-increment. La propriété counter-reset est spécifiée par deux valeurs: none et id numbers. "None" est la valeur initiale de cette propriété. Les valeurs négatives ne sont pas autorisées.

Valeur initiale	none
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.counterReset = "section" ;

Syntaxe

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

Cliquez sur le bouton "Try it" pour définir la propriété counter-reset.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      h2::before {
      counter-increment: section;
      content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Cliquez sur le bouton "Try it" pour définir la propriété counter-reset:</p>
    <button onclick="myFunction()">Try it</button>
    <h2>Tutoriels HTML </h2>
    <h2>Tutoriels JavaScript </h2>
    <h2>Tutoriels CSS </h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section";
      }
    </script>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Compteurs ne sont pas incrémentés.
name number	Name définit le nom du compteur pour réinitialiser. Number définit la valeur pour réinitialiser le compteur reset the counter à chaque occurrence de l'élément. C'est 0 par défaut.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.