Contatori e stili di elenchi

Molti tipi di contenuti sono rappresentati al meglio come un elenco HTML list. Per i contenuti degli elenchi ordinati, come i passaggi di una ricetta o le note a piè di pagina di un articolo, spesso anche il marcatore contiene informazioni. Il CSS fornisce diversi modi per controllare i contatori in un elenco.

Stili di elenco

Esiste un'ampia gamma di tipi di stili di elenco predefiniti che supportano numeri, alfabeti, numeri romani e molti sistemi di conteggio internazionali.

Oltre agli stili supportati dai browser, il W3C ha pubblicato Ready-made Counter Styles, con il supporto di 181 stili aggiuntivi in 45 sistemi di scrittura.

Se queste opzioni non soddisfano le tue esigenze, puoi anche definire un @counter-style personalizzato. In questo modo puoi specificare simboli personalizzati, un prefisso e un suffisso e altro ancora.

Per impostazione predefinita, il marcatore dell'elemento è outside l'elenco, posizionato davanti all'elenco e allineato a destra. Puoi anche posizionare il marcatore dell'elemento all'interno dell'elenco con list-style-position: inside.

Contatori

Mentre gli stili di elenco controllano la visualizzazione dei marcatori degli elementi dell'elenco, i contatori consentono di controllare i valori da visualizzare. Per gli elementi dell'elenco <li>, il browser crea un contatore chiamato list-item che viene incrementato di 1 per ogni elemento dell'elenco incontrato.

I contatori CSS tengono traccia del numero di volte in cui viene eseguito il rendering di un elemento con un valore counter-increment corrispondente impostato.

Per creare un nuovo contatore, utilizza counter-reset con un nome di contatore e, facoltativamente, un valore iniziale. Spesso lo imposti su un elemento principale che contiene tutti gli elementi da conteggiare.

Aggiungi quindi una proprietà counter-increment a ogni elemento che vuoi conteggiare.

Infine, visualizza il valore del contatore utilizzando la funzione counter().

In questo esempio, vogliamo visualizzare il conteggio progressivo delle note a piè di pagina come testo del link per ogni nota a piè di pagina. Poiché vogliamo un singolo contatore per l'intero documento, impostiamo counter-reset: note sul corpo e incrementiamo ogni link alla nota a piè di pagina.

Puoi anche avere più contatori che conteggiano elementi diversi. Nell'esempio delle note a piè di pagina, cosa succede se vuoi visualizzare l'indice della sezione e del paragrafo in cui si trova la nota a piè di pagina?

Il conteggio delle sezioni può essere creato nel corpo utilizzando counter-reset e poi incrementato su ogni elemento <h2>. Vogliamo che il conteggio dei paragrafi venga reimpostato per ogni sezione, quindi utilizzeremo counter-reset sugli elementi <h2> e incrementeremo gli elementi <p>.

Infine, combiniamo i valori del contatore nella proprietà content.

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

Contatori nidificati

Cosa succede quando nidifichi un elenco all'interno di un altro elenco? Il contatore list-item viene inizializzato per ogni elemento <ul> o <ol> e l'utilizzo di counter() restituisce solo il numero del conteggio più interno. Se vuoi mostrare il conteggio di ciascuno dei contatori nidificati, utilizza la funzione counters(), che accetta un nome di contatore e un separatore.

li::marker {
  content: counters(list-item, ".")
  }

Inversione dei contatori

Per impostazione predefinita, i contatori (incluso il contatore implicito list-item per gli elementi <ol>) iniziano da 0 e aumentano di uno per ogni elemento, il che significa che il primo verrà conteggiato come 1. Cosa succede se vuoi contare all'indietro fino a 1?

Per farlo, aggiungi l'attributo reversed a <ol>. Se utilizzi lo stile di elenco standard, i marcatori funzioneranno come previsto. Tuttavia, se utilizzi un contatore personalizzato, dovrai impostare counter-increment su un valore negativo e calcolare manualmente il valore iniziale del contatore.

Verifica le tue conoscenze