Come creare Liste con voci Annidate E Numerate come su Wikipedia

[Handerson]

l'esempio chiaro e funzionante sta qui
http://jsfiddle.net/qGCUk/4/

che il css sia esterno o meno non fa differenza

Ottimo però non riesco a capire se per quelle 3 righe di css devo creare un unica classe, come nel seguente esempio o se è preferibile crearne 3 diverse:

.contenuti-lista ol {
counter-reset: item
}
.contenuti-lista li {
display: block
}
.contenuti-lista li:before {
content: counters(item,".")" ";
counter-increment: item
}

e inoltre non mi è chiaro in quali punti del codice richiamare tale classe, se in tutti i tag ol e li o se solo in alcuni:
esempio in cui lo richiamo solo in ol

<ol class="contenuti-lista">
  <li>one</li>
  <li>two
  <ol>
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol>
   <li>three.one</li>
   <li>three.two</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>four</li>
  </ol>

Grazie per il supporto!

[Vincent.Zeno]

è sufficiente assegnare la classe a tutte le liste OL
ti riporto l'esempio di base, per semplicità:

css

OL.lista { counter-reset: item }
OL.lista LI { display: block }
OL.lista LI:before { content: counters(item, ".") " "; counter-increment: item }


html
<ol class="lista" >
  <li>one</li>
  <li>two
  <ol class="lista">
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol class="lista">
   <li>three.one</li>
   <li>three.two
    <ol class="lista">
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </li>
   </ol>
     </li> 
  <li>four</li>
  </ol>

[Handerson]

è sufficiente assegnare la classe a tutte le liste OL
ti riporto l'esempio di base, per semplicità:

css

OL.lista { counter-reset: item }
OL.lista LI { display: block }
OL.lista LI:before { content: counters(item, ".") " "; counter-increment: item }


html
<ol class="lista">
  <li>one</li>
  <li>two
  <ol class="lista">
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol class="lista">
   <li>three.one</li>
   <li>three.two</li>
    <ol class="lista">
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>four</li>
  </ol>

Ottimo! Allora funziona quasi tutto adesso! C'è solo un dettaglio che non mi torna e che ho evidenziato in rosso.
Con il seguente codice html:

<ol class="contents-list"> //alla fine ho chiamato content-list la classe nel foglio esterno
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc
      <ol class="contents-list">
       <li>abc</li>
        <ol class="contents-list">
         <li>abc</li>
        </ol>
       <li>abc</li>
        <ol class="contents-list">
         <li>abc</li>
        </ol>
      </ol>
  </li>
  <li>abc
   <ol class="contents-list">
     <li>abc</li>
     <li>abc</li>
     <li>abc</li>
     <li>abc</li>
    </ol>
   </li> 
  <li>abc</li>
</ol>

l'output è questo:

• 1.abc
• 2.abc
• 3.abc
• 4.abc
• 5.abc
  
  • 5.1.abc
    
    • 5.1.1.abc
    
    
  • 5.2.abc
    
    • 5.1.1.abc
  
  
• 6.abc
  
  • 6.1.abc
  • 6.2.abc
  • 6.3.abc
  • 6.4.abc
  
  
• 7.abc

Come si nota, in rosso è riportato un numero che secondo la logica dovrebbe essere 5.2.1. e che invece è ancora 5.1.1.

C'è qualcosa che mi sfugge?

Grazie

[Vincent.Zeno]

controlla bene la logica: ol non può stare dentro ol, ma deve necessariamente stare entro una voce di lista

[Vincent.Zeno]

nel mio post c'era un errore, ora corretto

[Handerson]

nel mio post c'era un errore, ora corretto

Spettacolare! Ora funziona correttamente! Soddisfazione estrema! Siamo passati dal dover gestire manualmente la progressione dei numeri al poterlo fare con l'ausilio di una classe css! Grazie ancora a te e agli altri che hanno segnalato il link!