Contatore CSS

Pizza

Hamburger

Hotdog

I contatori CSS sono "variabili" mantenute dal CSS, i cui valori possono essere incrementati dalle regole CSS (tracciando il loro utilizzo).

I contatori ti permettono di adattare l'apparenza in base alla posizione del contenuto nel documento.

Numerazione automatica con contatori

I contatori CSS sono come "variabili" variabili. I valori possono essere incrementati dalle regole CSS (tracciando il loro utilizzo).

Per utilizzare i contatori CSS, utilizzeremo i seguenti attributi:

  • counter-reset - creare o ripristinare il contatore
  • counter-increment - incrementare il valore del contatore
  • content - inserire il contenuto generato
  • counter() o counters() funzione - aggiungere il valore del contatore all'elemento

Per utilizzare i contatori CSS, è necessario prima usare counter-reset Creare esso.

Esempio sottostante crea un contatore per la pagina (nel selettore body) e incrementa il valore del contatore per ogni elemento <h2>, aggiungendo all'inizio di ogni <h2> "Sezione <valore del contatore>:"

Esempio

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Sezione " counter(section) ": ";
}

Prova te stesso

Contatori nidificati

Esempio sottostante crea un contatore per la pagina (section) e un contatore per ogni elemento <h1> (subsection).

"section" il contatore conta per ogni elemento <h1>, scrivendo anche "Sezione" e il valore del contatore section, "subsection" il contatore conta per ogni elemento <h2>, scrivendo il valore del contatore section e il valore del contatore subsection:

Esempio

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Sezione " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Prova te stesso

I contatori sono anche molto utili per creare elenchi di sommario, poiché viene creato automaticamente un nuovo esempio di contatore nei sottoelementi. Qui, usiamo counters() La funzione inserisce una stringa tra i contatori a diversi livelli di nesting:

Esempio

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Prova te stesso

Proprietà contatore CSS

Proprietà Descrizione
content Utilizzare insieme ai pseudo-elementi ::before e ::after per inserire il contenuto generato.
counter-increment Incrementare il valore di uno o più contatori.
counter-reset Creare o reimpostare uno o più contatori.