elementi (li) personalizzati manualmente con spaziatura

[jeyjack]

So che il tuo pensiero può essere "no me ne pò fregà de meno de a semmanteca, basta che se veda come dico io".

Mi hai beccato è esattamente questo il mio approccio!

L'affare si potrebbe risolvere comunque in modo relativamente semplice impostando una roba del genere:

codice HTML:
<ol>
<li>...
</ol>
<span class="baret"></span>
<ul class="bested">...</ul>
cioè, metti l'icona e relativi dettagli subito dopo l'elemento <ol>

quindi aggiungi una regola CSS del genere:
codice:
ol:not(.active) + .baret,
ol:not(.active) + .baret + .bested {
display: none;
}
questo fa in modo che icona e dettagli siano nascosti quando l'elemento <ol>, che li precede, non è ".active".

Vedi se può andare bene.

Alla grande, ho seguito il tuo consiglio e una volta tolto l'elemento <li> e aggiunto il codice CSS il problema pare si sia risolto!

Cerco di spiegarti quale sia il tuo errore.

Lo standard richiede che dentro gli elementi lista (<ul>, <ol>) siano presenti solo elementi <li> (ed eventuali <script>).

Vedi specifiche: The ol element

Content model:
Zero or more li and script-supporting elements.


Lo standard prevede anche che possa essere omesso il tag di chiusura per gli elementi <li>.

Se tu noti, anche nei miei esempio ho omesso le chiusure degli <li>.
Per cui la struttura che ho usato, per avere <ol> annidati e ottenere i sottolivelli, è questa:
codice HTML:
<ol class="num-list">
<li>Elemento (1)
<li>Elemento (2)
<ol class="num-list">
<li>Elemento (2.1)
<li>Elemento (2.2)
<li>Elemento (2.3)
</ol>
<li>Elemento (3)
</ol>

Nella tua pagina hai invece chiuso gli <li> (nessuno te lo vieta) ma lo hai fatto in modo sbagliato ottenendo, tra l'altro, un markup non valido:
codice HTML:
<ol class="num-list">
<li>Elemento (1)</li>
<li>Elemento (2)</li>
<ol class="num-list">
<li>Elemento (2.1)</li>
<li>Elemento (2.2)</li>
<li>Elemento (2.3)</li>
</ol>
<li>Elemento (3) - con alcuni browser viene visualizzato (2.4) </li>
</ol>
L'elemento <ol> annidato, lo hai posto come figlio dell'<ol> padre, ma (vedi standard) <ol> può avere solo figli <li>.

In questo caso la chiusura di <li> dovrà essere posta dopo quell'<ol> annidato, oppure puoi semplicemente ometterla.

Per questo motivo ti ho ripetutamente invitato a validare il codice, proprio per poter correggere questo tipo di errori che, se lasciati perdere, ti potranno portare solo grossi grattacapi.

Fai sapere, buon weekend

Tu sei un grande!! rimuovendo TUTTI gli elementi </li> ho risolto l'inghippo ma cosa non meno importante mi ritrovo un codice molto più pulito e semplificato

Puoi vedere il risultato delle modifiche apportate con i tuoi consigli, in tutti gli elementi Thomistic e Kalam
(sono le prime due voci sotto COSMOLOGICAL). LINK

Man mano che aggiungerò altro contenuto inizierò a personalizzare e ad applicare anche le altre numerazioni personalizzate.

Non so come ringraziarti buon weekend anche a te!