CSS - réinitialisation du compteur

La description

La propriété counter-reset définit un compteur nommé sur une valeur spécifique.

Valeurs possibles

  • name- Le nom d'un compteur. Le nom peut être n'importe quelle valeur de chaîne.

  • integer- Définit un incrément pour le compteur nommé à chaque fois que l'élément apparaît dans le document. Cet incrément peut être nul, voire négatif. Si aucun entier n'est fourni, le compteur est incrémenté de un.

  • none - Aucun incrément n'est effectué.

S'applique à

Tous les éléments HTML.

Syntaxe DOM

object.style.counterReset = "section 1";

Exemple

Cet exemple montre un moyen de numéroter des chapitres et des sections avec "Chapitre 1", "1.1", "1.2", etc.

<html>
   <head>
      <style>
         body {
            counter-reset: section;
         }
         h1 {
            counter-reset: subsection;
         }
         h1:before {
            counter-increment: section;
            content: "Section " counter(section) ". ";
         }
         h2:before {
            counter-increment: subsection;
            content: counter(section) "." counter(subsection) " ";
         }
      </style>
   </head>

   <body>
      <h1> Tutorialspoint.com</h1>
      <h2> Tutorialspoint.com</h2>
      <h2> Tutorialspoint.com</h2>
      <h2> Tutorialspoint.com</h2>
      <h2> Tutorialspoint.com</h2>
   </body>
</html>

Il produira le résultat suivant -

La propriété 'counter-reset' suit les règles en cascade. Ainsi, en raison de la cascade, la feuille de style suivante ne réinitialisera que 'imagenum' -

h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }

Pour réinitialiser les deux compteurs, ils doivent être spécifiés ensemble -

h1 { counter-reset: section -1 imagenum 99 }