Propriété CSS counter-reset

La propriété counter-reset réinitialise un ou plusieurs compteurs CSS à une valeur donnée. Cette propriété est généralement utilisée avec les content et counter-increment propriétés. La propriété accepte un nom de compteur et un entier optionnel, ou le mot-clé none. none est la valeur par défaut. Les valeurs négatives sont autorisées.

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

Syntaxe

Syntaxe de la propriété CSS counter-reset

css

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

Exemple de la propriété counter-reset :

Exemple de la propriété CSS counter-reset avec la valeur section

html

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

Try it Yourself »

Exemple de la propriété counter-reset avec une valeur négative :

Exemple de la propriété counter-reset avec une valeur négative :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* "my-counter" to 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* "my-counter" by 1 */
        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>

Try it Yourself »

Exemple de la propriété counter-reset avec des sections et sous-sections numérotées :

Exemple de la propriété counter-reset avec des sections et sous-sections numérotées :

html

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

Try it Yourself »

Valeurs

Valeur	Description
none	Les compteurs ne sont pas incrémentés.
name number	Name 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.
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

À quoi sert la propriété CSS 'counter-reset' ?

Elle est utilisée pour empêcher la récurrence d'un élément.Elle crée ou réinitialise les compteurs CSS dans une liste ou tout autre élément.Elle met en forme la couleur de fond d'un élément.Elle ajoute une image ou un dégradé à un élément HTML.Elle positionne les éléments en 'fixed', 'relative' ou 'absolute'.Elle est souvent utilisée avec la propriété 'counter-increment' et la propriété 'content'.

Propriété CSS counter-reset ​

Syntaxe ​

Exemple de la propriété counter-reset : ​

Exemple de la propriété counter-reset avec une valeur négative : ​

Exemple de la propriété counter-reset avec des sections et sous-sections numérotées : ​

Valeurs ​

Pratique ​

Propriété CSS counter-reset

Syntaxe

Exemple de la propriété counter-reset :

Exemple de la propriété counter-reset avec une valeur négative :

Exemple de la propriété counter-reset avec des sections et sous-sections numérotées :

Valeurs

Pratique