Liste ordinate strutturate in una pagina web

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

  1. primo elemento
  2. secondo elemento
  3. terzo elemento
    1. primo elemento del terzo
    2. secondo elemento del terzo
    3. terzo elemento del terzo
  4. quarto elemento
  5. quinto elemento

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

  1. primo elemento
  2. secondo elemento
  3. terzo elemento
    1. primo elemento del terzo
    2. secondo elemento del terzo
    3. terzo elemento del terzo
  4. quarto elemento
  5. quinto elemento

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:

  1. primo elemento
  2. secondo elemento
  3. terzo elemento
    1. primo elemento del terzo
    2. secondo elemento del terzo
    3. terzo elemento del terzo
      1. primo elemento del terzo del terzo
      2. secondo elemento del terzo del terzo
        1. primo elemento del secondo del terzo del terzo
        2. secondo elemento del secondo del terzo del terzo
        3. terzo elemento del secondo del terzo del terzo
      3. terzo elemento del terzo del terzo
  4. quarto elemento
  5. quinto elemento

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}

Titolo del primo capitolo

Titolo del primo paragrafo

Titolo del secondo paragrafo

Titolo del primo sottoparagrafo

Titolo del secondo sottoparagrafo

Titolo del terzo paragrafo

Titolo del secondo capitolo

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 😀

pixelstats trackingpixel

Autore: Lila

Salve a tutti, mi chiamo Lila, mi occupo di conservazione architettonica e CAD, le mie passioni sono la musica corale barocca, l'arte, la storia e le vecchie carte, il cucito e le macchine da cucire degli anni 50 e 60, la maglieria e le macchine da maglieria, la buona cucina, gli animali e soprattutto i miei cucciolotti!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *