I contatori CSS

I contatori CSS sono delle variabili che possono essere utilizzate per numerare elementi, liste o altro ancora. I contatori possono essere creati, aumentati e diminuiti tramite le regole CSS.

In questa lezione, vediamo come funzionano le proprietà CSS counter-reset, counter-increment e le funzioni counter() e counters(). Con queste proprietà, è possibile fare questi elenchi:

Le proprietà dei contatori CSS

Vediamo le proprietà necessarie per i contatori CSS.

La proprietà counter-reset

Il primo passo per usare i contatori CSS è quello di crearli. Per farlo, devi utilizzare la proprietà counter-reset, che ha il compito di ripristinare il contatore (se non esiste, lo crea). Con la proprietà counter-reset, il contatore viene inizialmente impostato a 0.

Con la proprietà counter-reset è necessario scegliere il nome del contatore. Il selettore generalmente è body, perché indica l'elemento dove è attivo il contatore. Con body, il contatore è utilizzabile con qualsiasi elemento della pagina.

body {
  counter-reset: Contatore;
}

Puoi portare un contatore già creato ad un valore specifico sempre usando la proprietà counter-reset, in questo modo: counter-reset: nomeContatore valore;

counter-reset: Contatore 3; /* Contatore impostato su 3 */

La proprietà counter-increment

La proprietà counter-increment permette di incrementare di 1 il contatore. Ogni volta che viene incontrato l'elemento che viene indicato dal selettore, il contatore verrà incrementato.

Per usare counter-increment, si specifica il nome del contatore.

p {
  counter-increment: Contatore;
}

Nell'esempio, ogni volta che viene incontrato un <p> nella pagina HTML, il contatore Contatore che avevamo creato precedentemente viene incrementato di 1.

Usare i contatori CSS

Abbiamo visto come crearlo e come incrementarlo. Ora, vediamo come utilizzare il contatore.

Per usare i contatori, è necessario utilizzare la funzione counter(). Questa funzione restituisce il valore corrente del contatore. Possiamo usarlo per stampare nella pagina i numeri del contatore.

Per farlo, usiamo lo pseudo-elemento ::before (che abbiamo visto nella lezione degli pseudo-elementi) e aggiungiamo del contenuto (in questo caso i valori del contatore) con content.

<h3>Ecco cosa imparerai su Biadets</h3>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<span>E tanto altro...</span>

<style>
body {
  counter-reset: Contatore;
}
p::before {
  counter-increment: Contatore;
  content: "Elemento " counter(Contatore) ": ";
  color: red;
  font-weight: bold;
}
</style>

Utilizzare più contatori insieme

Puoi creare e usare più contatori insieme. Può essere utile per creare delle liste che hanno, a loro volta, delle sotto-liste. Ad esempio, i capitoli di un libro:

<h4>Il linguaggio HTML</h4>
<p>A cosa serve HTML</p>

<h4>Il linguaggio CSS</h4>
<p>A cosa serve CSS</p>

<h4>Il linguaggio JavaScript</h4>

<style>
body {
  counter-reset: sezione;
}
h4 {
  counter-increment: sezione;
  counter-reset: sottosezione;
}
h4::before {
  content: "Sezione " counter(sezione) ". ";
}
p::before {
  counter-increment: sottosezione;
  content: counter(sezione) "." counter(sottosezione) " ";
}
</style>

La funzione counters()

La funzione counters() è utilizzata per combinare i valori di più contatori in una singola stringa, separati da un delimitatore. Questa funzione è particolarmente utile quando si ha una struttura annidata, come quella dell'esempio precedente.

La sintassi è: counters(nomeContatore, separatore). Il nomeContatore è il nome del contatore che si sta combinando. Il separatore è una stringa (di solito un simbolo o un testo) che separa i valori dei contatori combinati.

<ol>
  <li>Primo elemento
    <ol>
      <li>Primo sotto-elemento</li>
      <li>Secondo sotto-elemento
        <ol>
          <li>Primo sotto-sotto-elemento</li>
          <li>Secondo sotto-sotto-elemento</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Secondo elemento</li>
  <li>Terzo elemento
    <ol>
      <li>Primo sotto-elemento</li>
    </ol>
  </li>
</ol>

<style>
ol {
  counter-reset: item;
  list-style-type: none; /* Rimuove i marker di default della lista */
  padding-left: 20px;
}
li {
  counter-increment: item;
  margin-bottom: 5px;
}
li::before {
  content: counters(item, ".") " ";
  font-weight: bold;
  color: blue;
}
li ol {
  counter-reset: item;
}
</style>