back to top

CSS3: contare gli elementi con counter-reset e counter-increment

Le proprietà di CSS3 che vi propongo in questa lezione permettono di numerare automaticamente gli elementi di un documento HTML. La numerazione è resa possibile grazie a due proprietà: counter-reset e counter-increment.

La prima proprietà è utilizzata per creare una variabile da usare come contatore. La proprietà in questione viene normalmente assegnata all’elemento genitore (che contiene gli elementi che si desidera conteggiare) oppure all’elemento logicamente preordinato a quelli che si desidera contare. Se, ad esempio, volessimo contare tutti i capitoli di una pagina andremo ad agire sul tag body creando una variabile contatore chiamata "capitoli":

body{
  counter-reset: capitoli;
}

Con la proprietà counter-increment, invece, andiamo ad incrementare il valore della variabile definita con counter-reset. Per tornare all’esempio di prima si supponga di aver utilizzato tanti tag h1 quanti sono i capitoli della pagina. Il codice da utilizzare nel nostro foglio di stile sarebbe:

h1{
  counter-increment: capitoli;
}

I valore della variabile "capitoli" potrà poi essere stampato nella pagina (ad esempio accanto ad ogni h1) utilizzando le pseudoclassi :before e :after e la proprietà content come vedremo in seguito.

E’ bene precisare che in un documento possono esistere più counter-reset in modo da creare strutture numerate. Sicuramente un esempio vi aiuterà a capire meglio. Cominciamo dal semplice codice HTML che ci occorre:

<body>

  <h1>Fiori</h1>
  <h2>Rose</h2>
  <p>lorem...</p>
  <h2>Margherite</h2>
  <p>lorem...</p>

  <h1>Frutti</h1>
  <h2>Mela</h2>
  <p>lorem...</p>
  <h2>Pera</h2>
  <p>lorem...</p>
  <h2>Fico</h2>
  <p>lorem...</p>

</body>

Noi vogliamo fare in modo che la numerazione principale sia sui titoli <h1>, mentre, ogni volta che si incontra un titolo <h2> debba essere applicata una numerazione secondaria.

Ci servono quindi due elementi counter-reset. Il primo suddivide gli elementi del body (h1), il secondo gli elementi logicamente sottostanti a ciascun h1, quindi possiamo definire come segue i nostri elementi counter-reset.

body {
  counter-reset: capitoli;
}
h1 {
  counter-reset: paragrafi;
}

I nomi delle variabili ("capitoli" e "paragrafi") sono assolutamente arbitrari. La prima variabile (capitoli) è stata assegnata al tag body in quanto si tratta della numerazione principale, la seconda (paragrafi) al tag h1 in quanto si tratta di una sotto-numerazione che utilizzeremo per conteggiare gli elementi subordinati a ciascun h1.

A questo punto dobbiamo fare in modo che, prima di ogni elemento <h1>, la variabile "capitoli" sia incrementata e che la numerazione sia scritta prima del contenuto del tag <h1>. Per farlo dovremo fare ricorso alla pseudoclasse :before ed alla proprietà content come mostrato nel codice che segue:

h1:before{
  counter-increment: capitoli;
  content: "Capitolo " counter(capitoli) " - ";
}

Prima di ogni titolo <h2> dobbiamo incrementare la variabile "paragrafi" e magari scrivere il numero del capitolo e del paragrafo prima del contenuto del tag <h2>. Il codice necessario è il seguente:

h2:before {
  counter-increment: paragrafi;
  content: counter(capitoli) "." counter(paragrafi) " ";
}

Il risultato che si ottiene è mostrato nella figura che segue

numerazione automatica dei titoli
Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).