Molti tipi di contenuti sono rappresentati al meglio come elenco HTML. 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. CSS offre diversi modi per controllare i contatori in un elenco.
Stili di elenco
Esiste un'ampia gamma di tipi di stili di elenchi predefiniti che supportano numeri, lettere dell'alfabeto, 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 modalità di visualizzazione dei marcatori degli elementi di elenco, i contatori ti 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 trovato.
I contatori CSS tengono traccia del numero di volte in cui viene visualizzato un elemento a cui è impostato un valore counter-increment corrispondente.
Per creare un nuovo contatore, utilizza counter-reset con un nome di contatore e, facoltativamente, un valore iniziale. Spesso viene impostato su un elemento principale che contiene tutti gli elementi che verranno conteggiati.
জুর এরপর, আপনি যে প্রতিটি উপাদান গণনা করতে চান তাতে একটি counter-increment প্রপার্টি যোগ করুন।
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 ciascuna nota a piè di pagina. Poiché vogliamo un unico 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 in ogni elemento <h2>. Vogliamo che il conteggio dei paragrafi venga reimpostato per ogni sezione, quindi utilizzeremo counter-reset sugli elementi <h2> e incrementeremo sugli 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 annidi 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, ".")
}
Contatori inversi
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. E se volessi contare alla rovescia fino a 1?
Per farlo, aggiungi l'attributo reversed al <ol>. Se utilizzi lo stile di elenco standard, i marcatori funzioneranno come previsto. Tuttavia, se utilizzi un contatore personalizzato, devi impostare counter-increment su un valore negativo e calcolare manualmente il valore iniziale del contatore.