CSS - counter-reset

Descrizione

La proprietà counter-reset imposta un contatore denominato su un valore specifico.

Possibili valori

  • name- Il nome di un contatore. Il nome può essere qualsiasi valore di stringa.

  • integer- Definisce un incremento per il contatore denominato ogni volta che l'elemento appare nel documento. Questo incremento può essere zero o addirittura negativo. Se non viene fornito alcun numero intero, il contatore viene incrementato di uno.

  • none - Non viene eseguito alcun incremento.

Si applica a

Tutti gli elementi HTML.

Sintassi DOM

object.style.counterReset = "section 1";

Esempio

Questo esempio mostra un modo per numerare capitoli e sezioni con "Capitolo 1", "1.1", "1.2" e così via.

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

Produrrà il seguente risultato:

La proprietà "counter-reset" segue le regole a cascata. Pertanto, a causa della cascata, il seguente foglio di stile reimposterà solo 'imagenum' -

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

Per azzerare entrambi i contatori, devono essere specificati insieme:

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