W3docs
it
Accedi

Proprietà CSS counter-reset

Usa la proprietà CSS counter-reset per definire e inizializzare uno o più contatori CSS. Esempi pratici e guida completa su W3docs.

La proprietà counter-reset crea uno o più contatori CSS e imposta ciascuno di essi su un valore iniziale. Nonostante il nome, il suo compito principale è inizializzare un contatore in modo che possa essere utilizzato in seguito — non si limita ad azzerare un contatore esistente, ma lo porta in vita nell'ambito corrente.

I contatori CSS sono variabili mantenute dal browser i cui valori possono essere incrementati dalle regole CSS per tracciare quante volte vengono utilizzati. Rendono possibile numerare sezioni, capitoli, elementi di lista o qualsiasi elemento ripetuto interamente in CSS, senza modifiche al markup o a JavaScript.

Un contatore è utile solo come parte di un trio di proprietà:

  • counter-reset — crea il contatore e gli assegna un valore iniziale (questa pagina).
  • counter-increment — aggiunge al valore del contatore, solitamente una volta per ogni elemento corrispondente.
  • content — visualizza il valore del contatore tramite la funzione counter() o counters(), tipicamente all'interno di uno pseudo-elemento ::before.

Questa pagina tratta la sintassi di counter-reset, il funzionamento dell'ambito dei contatori, la numerazione di sezioni annidate, l'uso di valori iniziali negativi e personalizzati, e i valori accettati dalla proprietà.

Come funziona

Ogni dichiarazione counter-reset prevede un nome di contatore a scelta (ad esempio section) seguito da un intero opzionale come valore iniziale:

/* "section" counter created, starts at 0 */
counter-reset: section;

/* "section" counter created, starts at 5 */
counter-reset: section 5;

/* multiple counters in one declaration */
counter-reset: chapter 0 page 1;

Se si omette il numero, il contatore parte da 0. Il primo elemento corrispondente esegue poi counter-increment prima che content lo legga, quindi un contatore che parte da 0 e incrementa di 1 viene visualizzato come 1 sul primo elemento — che è di solito il comportamento desiderato.

L'ambito è importante. Un contatore creato con counter-reset è limitato all'elemento su cui è dichiarato e ai discendenti e fratelli successivi di quell'elemento. Questo è ciò che consente di resettare un sotto-contatore per ogni sezione: inserire counter-reset: subsection su ogni h2 assegna a ogni sezione un proprio contatore subsection fresco. L'esempio di numerazione annidata di seguito si basa su questo comportamento.

Valore inizialenone
Si applica aTutti gli elementi.
EreditatoNo.
AnimabileNo.
VersioneCSS2
Sintassi DOMobject.style.counterReset = "section" ;

Sintassi

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

Il name è un identificatore a scelta e number è un intero opzionale (può essere negativo). È possibile elencare più coppie name number in una sola dichiarazione per creare più contatori contemporaneamente.

Esempio: impostare un contatore con JavaScript

counter-reset è accessibile anche dal DOM come element.style.counterReset. Clicca "Try it" per reimpostare il contatore section su 5, così i titoli vengono rinumerati a partire da 6.

<!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>
Provalo tu stesso »

Esempio con incremento negativo (conto alla rovescia)

I numeri negativi sono consentiti sia come valori iniziali che su counter-increment. Qui il contatore viene creato a 0 e l'incremento è -1, quindi ogni titolo conta all'indietro: -1, -2, -3, -4.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* create "my-counter", start at 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* decrease "my-counter" by 1 on each h2 */
        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>
Provalo tu stesso »

Esempio con sezioni e sottosezioni numerate

Questo è l'uso più comune di counter-reset nel mondo reale: numerazione annidata come 1.1, 1.2, 2.1. Il contatore subsection viene resettato su ogni h2, così ogni sezione riavvia la propria numerazione delle sottosezioni da 1. Senza quel reset per ogni h2, le sottosezioni continuerebbero a crescere su tutto il documento.

<!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>
Provalo tu stesso »

Valori

ValoreDescrizione
noneI contatori non vengono incrementati.
name numberName definisce il nome del contatore da resettare. Number definisce il valore a cui resettare il contatore ad ogni occorrenza dell'elemento. Il valore predefinito è 0 se non specificato.
initialImposta la proprietà al suo valore predefinito.
inheritEredita la proprietà dall'elemento genitore.

Errori comuni

  • Da solo non mostra nulla. counter-reset crea solo il contatore. Servono ancora counter-increment per avanzarlo e content: counter(name) per visualizzarlo. Una pagina con solo counter-reset non mostra numeri.
  • counter-reset vs counter-set. counter-reset crea un contatore nell'ambito corrente; il più recente counter-set modifica solo il valore di un contatore già esistente e non crea mai un nuovo ambito. Usa counter-reset quando vuoi che la numerazione riparta all'interno di una sezione.
  • L'incremento avviene prima della visualizzazione. Poiché l'incremento su un ::before avviene prima che content venga letto, un contatore che parte da 0 con +1 mostra 1 sul primo elemento. Usa un valore iniziale diverso se hai bisogno di un primo numero differente.
  • I contatori non vengono ereditati. Il valore della proprietà non viene ereditato, ma il contatore stesso è visibile ai discendenti e ai fratelli successivi tramite l'ambito — è questo che rende possibile la numerazione annidata.

Supporto browser

counter-reset fa parte di CSS2 ed è supportato in tutti i browser moderni, inclusi Chrome, Firefox, Safari, Edge e Opera.

Esercizio

Pratica
A cosa serve la proprietà CSS 'counter-reset'?
A cosa serve la proprietà CSS 'counter-reset'?
Was this page helpful?