Utilizzando contatori CSS
contatori CSS sono come "variabili". I valori delle variabili possono essere incrementati di regole CSS (che terrà traccia di quante volte vengono utilizzati).
Per lavorare con i contatori CSS useremo le seguenti proprietà:
-
counter-reset- Crea o azzera un contatore -
counter-increment- incrementa un valore del contatore -
content- Inserti generated content -
counter()ocounters()funzione - aggiunge il valore di un contatore ad un elemento
Per utilizzare un contatore CSS, deve prima essere creato con counter-reset .
L'esempio seguente crea un contatore per la pagina (nel selettore corpo), poi incrementa il valore del contatore per ogni <h2> elemento e aggiunge "Section < value of the counter >:" all'inizio di ogni <h2> elemento:
Esempio
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Prova tu stesso " Contatori Nesting
L'esempio seguente crea un contatore per la pagina (sezione) e un contatore per ogni <h1> elemento (comma). La "section" contatore sarà conteggiato per ogni <h1> elemento con "Section < value of the section counter >." , Ed il "subsection" contatore sarà conteggiato per ogni <h2> elemento con "< value of the section counter >.< value of the subsection counter >" :
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) " ";
} Prova tu stesso " Un contatore può anche essere utile per fare le liste delineati perché una nuova istanza di un contatore viene creato automaticamente in elementi figlio. Qui usiamo i counters() Funzione per inserire una stringa tra i diversi livelli di contatori nidificati:
Esempio
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Prova tu stesso " Proprietà contatore CSS
| Proprietà | Descrizione |
|---|---|
| content | Utilizzato con il :: :: prima e dopo la pseudo-elementi, per inserire contenuto generato |
| counter-increment | Incrementi di un o più valori del contatore |
| counter-reset | Crea o azzera uno o più contatori |