I contatori CSS sono "variabili" gestite dai CSS i cui valori possono essere incrementati dalle regole CSS (per tenere traccia di quante volte vengono utilizzati). I contatori ti consentono di regolare l'aspetto del contenuto in base alla sua posizione nel documento.

Numerazione automatica con contatori

I contatori CSS sono come "variabili". I valori delle variabili possono essere incrementati dalle regole CSS (che terranno traccia di quante volte vengono utilizzati). Per lavorare con i contatori CSS utilizzeremo le seguenti proprietà:

• counter-reset - Crea o reimposta un contatore
• counter-increment - Incrementa il valore di un contatore
• content - Inserisce il contenuto generato
• counter() o counters() - funzione che aggiunge il valore di un contatore a un elemento

Per utilizzare un contatore CSS, è necessario prima crearlo con il counter-reset.

L'esempio seguente crea un contatore per la pagina (nel selettore body), quindi incrementa il valore del contatore per ogni elemento <h2> e aggiunge "Sezione <valore del contatore>:" all'inizio di ogni elemento <h2>:

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Visualizza esempio

Contatori annidati

L'esempio seguente crea un contatore per la pagina (sezione) e un contatore per ogni elemento <h1> (sottosezione). Il contatore "sezione" verrà conteggiato per ogni elemento <h1> con "Sezione <valore del contatore di sezione>." e il contatore "sottosezione" verrà conteggiato per ogni elemento <h2> con "<valore del contatore di sezione >.<valore del contatore della sottosezione>":

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) " ";
}

Visualizza esempio

Un contatore può essere utile anche per creare elenchi strutturati perché una nuova istanza di un contatore viene creata automaticamente negli elementi figlio. Qui utilizziamo la funzione counters() per inserire una stringa tra diversi livelli di contatori nidificati:

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Visualizza esempio

Proprietà del contatore CSS