Il contatore CSS è una caratteristica avanzata che permette di creare dei contatori automatici in un documento, tipicamente utilizzato nelle liste o nelle sezioni di un documento che richiede un contatore.
Per utilizzare il contatore, devi prima inizializzare il contatore utilizzando la proprietà counter-reset in CSS.
Ad esempio:
```
body {
counter-reset: miaLista;
}
```
In questo esempio, hai appena creato un contatore chiamato miaLista. Questo contatore si reset a 1 ogni volta che inizia un nuovo body.
Successivamente, per incrementare il contatore, devi utilizzare la proprietà counter-increment:
```
li {
counter-increment: miaLista;
}
```
In questo esempio, il contatore miaLista si incrementa ogni volta che c’è un nuovo elemento li (list item).
Infine, per visualizzare il valore del contatore, devi utilizzare la funzione counter() dell’CSS:
```
li:before {
content: counter(miaLista);
}
```
In questo esempio, il valore del contatore miaLista verrà mostrato prima di ogni elemento li (list item). Questo creerà una lista numerata automaticamente. Puoi anche aggiungere più contenuti, come punti o parentesi attorno al numero.
Il CSS completo sarebbe qualcosa come:
```
body {
counter-reset: miaLista;
}
li {
counter-increment: miaLista;
}
li:before {
content: counter(miaLista) “. “;
}
```
Il contatore CSS è molto versatile e può essere utilizzato per una varietà di applicazioni nella formattazione del documento web.
