Controllo dei elementi nelle liste non numerati

Una volta che hai speso del tempo per ordinare e riordinare elementi della tua lista non numerata HTML aggiungendo dei marcatori, potrai pensare che ci dovrebbe essere un modo semplice per invertire e riordinare gli elementi di questa lista.

Purtroppo le tecniche per farlo sono relativamente sconosciuto. Molti sviluppatori pronti a  rinunciare a cercare di trovare una soluzione, e ritornare di nuovo ad indicare i numeri a mano. In realtà, le risposte non sono difficili, specialmente se si sta utilizzando HTML5.

  Come iniziare la lista con un numero prescelto.

Per impostazione predefinita, tutti gli liste numerati iniziano con un uno. Questo diventa un problema se lista va separata da un paragrafo:

<h2>My Top Five Movies</h2>
<ol>
<li>Star Wars
<li>The Matrix
<li>Mr. & Mrs. Smith
<li>Wanted
</ol>
<p>Yes, I know those are Angelina Jolie movies. What can I say? I’m a fan.
<ol>
<li>Rashomon
</ol>

Per impostazione predefinita, un nuovo elenco inizierà con 1. Al fine di avviare una nuova lista con un numero desiderato, utilizzare  attributo start:

<ol start=5>
<li>Rashomon
</ol>

Il risultato sarà simile a questo:

My Top Five Movies

  1. Star Wars
  2. The Matrix
  3. Mr. & Mrs. Smith
  4. Wanted

Yes, I know those are Angelina Jolie movies. What can I say? I’m a fan.

  1. Rashomon

L'uscita in ordine inverso

Se si desidera visualizzare gli elementi dell'elenco in ordine inverso, utilizzare l'attributo reversed:

<h3>Countdown Sequence Start</h3>
<ol reversed>
<li>Ignition
<li>Engine start
<li>Liftoff
</ol>

 Risultato:

Takeoff sequence

  1. Ignition
  2. Engine start
  3. Liftoff

La parte più difficile di elenchi numerati -  è la corretta numerazione nella forma richiesta: per esempio, 5.1 o 3.7, per controllare l'ordine di visualizzazione dei numeri nel CSS è possibile usufruire di speciali contatori:

Ad esempio, si desidera un numero di liste che partirà come 1.1. In primo luogo, abbiamo bisogno di scrivere il codice HTML corretto:

<h2>Legalese</h2>
<ol>
    <li>Flibbert
    <ol>
        <li>Flibberme
        <li>Giblet
    </ol>
    <li>Me Giblets
    <ol>
    <li>Beep
    <li>Bop
    <li>Boop
    </ol>
</ol>

Il contatore viene incrementato quando incontra un certo oggetto.

Per iniziare, rimuovere la visualizzazione standart delle liste:

ol { list-style-type: none; }

Quindi, specificare al contatore di fermarsi e passare  accanto a ogni nuovo elemento ol:

ol { counter-reset: section; }

Dopo aver incontrato ogni elemento li, incrementare le sottoliste di 1:

li { counter-increment: section; }

Prima di ogni elemento (principale) nella lista, visualizzare il contenuto, e l'attuale numero contato:

li before { content: counters(section, ".") " "; }

Risultato:

    Legalese

  1 Flibbert

                 1.1 Flibberme

                 1.2 Giblet

   2  Me Giblets

                2.1  Beep

                2.2 Bop

                2.3 Boop

 Fonte lezione: http://demosthenes.info/blog/688/Custom-HTML-Ordered-Lists-Reversed-Reordered-and-PointNumbered

Letto 1517 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso