Non so se usiate le liste nidificate, cioè quelle liste in cui esistono uno o più sottolivelli. Che si tratti di elenchi o di titoli, è fondamentale che esista una certa coerenza fra i numeri ed i livelli. Se l’elenco è fatto di elementi consecutivi in generale basta cambiare l’indentatura e si capisce immediatamente. Ma se stiamo parlando di titoli di capitolo e paragrafo? Come evitare di numerare tutto a mano? come tenere conto del livello? Probabilmente sono la sola che si è posta il problema perché online non ho trovato alcuna soluzione, almeno quando ho affrontato il problema alcuni anni fa, ma probabilmente vale ancora la pena di postare i miei vecchi appunti.

Se voi usate una lista numerata, i numeri (o le lettere) proseguono ordinatamente in modo automatico

Funzionale per le cose semplici, ma se voglio una cosa più complessa, con i numeri e lettere combinati

Siamo abituati a fare facilmente una lista come questa con il nostro programma di videoscrittura, ma quando ho cercato di fare una cosa simile su una pagina web la risposta unanime è stata “impossibile”… per cui mi sono rimboccata le maniche, ho messo insieme informazioni diverse e composto il codice che mi permetteva di aggiungere il numero del livello precedente alla possibilità di cambiare il tipo di numeratore (lettere minuscole, maiuscole latine o greche, numeri romani ecc.).

ol.lista, ol.lista li{padding: 0 10px}
body {counter-reset: h1}
ol.lista { 
 list-style-type: none;
 counter-reset: level1;}
ol.lista li:before {
 content: counter(level1, upper-roman) ". ";
 counter-increment: level1;}
ol.lista li ol {
 list-style-type: none;
 counter-reset: level2;}
ol.lista li ol li:before {
content: counter(level1, upper-roman ) "." counter(level2, lower-greek) ". ";
counter-increment: level2;}
ol.lista li ol li ol {
 list-style-type: none;
 counter-reset: level3;}
 ol.lista li ol li ol li:before {
content: counter(level1, upper-roman ) "." counter(level2, lower-greek) "."counter(level3, lower-alpha) "_";
counter-increment: level3;}
ol.lista li ol li ol li ol {
 list-style-type: none;
 counter-reset: level4;}
 ol.lista li ol li ol li ol li:before {
content: counter(level4) ") ";
counter-increment: level4;}

Il codice che vedete prevede per 4 livelli di nidificazione all’interno di una lista ordinata, e parte togliendo il numeratore predefinito list-style-type: none; a ciascun livello e poi premettendo :beforeil content che come forse potete vedere usa il contatore ed il suo livello per comporre il nuovo numero. Al quarto livello i riferimenti ai numeri dei livelli precedenti scompaiono, lasciando posto ai soli numeri. Non si tratta di un codice di uso pratico, ma solo di un codice “di studio”, con più varianti possibili. All’interno di ogni elemento di lista nidificata si specifica anche quale contatore va incrementato counter-increment: level1;. L’aspetto completo generato da questo stile è il seguente:

La stessa tecnica si può utilizzare per numerare i livelli di intestazioni del testo h1, h2, h3 ecc. che, a differenza degli elenchi ordinati non hanno normalmente una numerazione. Il primo passo è proprio quello di settare un contatore per ogni livello:

body {counter-reset: h1}

Se vi interessa il codice CSS della struttura che vedete sopra è questo:

body {counter-reset: h1}
h1.capitoli:before {content: "Cap. " counter(h1, upper-roman) ". ";
 counter-increment: h1;}
h1.capitoli {counter-reset: h2}
h2.capitoli:before {content: "Par. " counter(h1, upper-roman ) "." counter(h2) ". ";
counter-increment: h2;}
h2.capitoli{counter-reset: h3}
h3.capitoli:before {content: "Sub. " counter(h1, upper-roman ) "." counter(h2) "." counter(h3, lower-alpha) ". ";
counter-increment: h3;}
h3.capitoli {counter-reset: h4}

mentre l’HTML è questo:

<h1 class="capitoli">Titolo del primo capitolo</h1>
<h2 class="capitoli">Titolo del primo paragrafo</h2>
<h2 class="capitoli">Titolo del secondo paragrafo</h2>
<h3 class="capitoli">Titolo del primo sottoparagrafo</h3>
<h3 class="capitoli">Titolo del secondo sottoparagrafo</h3>
<h2 class="capitoli">Titolo del terzo paragrafo</h2>
<h1 class="capitoli">Titolo del secondo capitolo</h1>

Non so se esistano modi più semplici per ottenere questo stesso risultato, e posso garantirvi che fuori dalla gabbia di WordPress è più facile ottenere buoni risultati. Francamente dubito che esistano altri pazzi online interessati all’argomento, ma dato che “a volte ritornano” ho preferito lasciare un appunto a me stessa dove potevo trovarlo facilmente 😀