Contatori CSS
Pizza
Hamburger
Hotdog
I contatori CSS sono "variabili" mantenute 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 tengono traccia di quante volte vengono utilizzate).
Per lavorare con i contatori CSS utilizzeremo le seguenti proprietà:
counter-reset- Crea o ripristina un contatorecounter-increment- Incrementa un valore contatorecontent- Inserisce il contenuto generatocounter()ocounters()funzione - Aggiunge il valore di un contatore a un elemento
Per utilizzare un contatore CSS, è necessario prima crearlo con counter-reset.
L'esempio seguente crea un contatore per la pagina (nel selettore del corpo), quindi incrementa il valore del contatore per ogni elemento <h2> e aggiunge "Sezione < valore del contatore >:" all'inizio di ogni elemento <h2>:
Esempio
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Contatori di nidificazione
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 di "sottosezione" verrà conteggiato per ogni elemento <h2> con "< valore del contatore di sezione >.< valore del contatore della sottosezione >":
Esempio
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) " ";
}
Un contatore può anche essere utile per creare elenchi delineati perché una nuova istanza di un contatore viene creata automaticamente negli elementi figlio. Qui usiamo la
counters()funzione per inserire una stringa tra diversi livelli di contatori annidati:
Esempio
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Proprietà contatore CSS
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |