Propriété CSS counter-reset

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>

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.

Support de Navigateurs

2.0+ 12.0+ 1.0+ 3.1+ 9.2+


Trouvez-vous cela utile?

Articles Associées