0Pricing
HTML Academy · Lezione

Elenchi annidati e stili degli elenchi

Annidare gli elenchi l’uno nell’altro e controllarne l’aspetto

Elenchi annidati e stili degli elenchi è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Elenchi annidati

Gli elenchi possono essere annidati all'interno degli elementi <li>:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Annidamento corretto

L'elenco annidato deve trovarsi all'interno di un elemento <li>, non essere un figlio diretto di <ul> o <ol>:

<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
  <ul>   <!-- INVALID -->
    <li>Item</li>
  </ul>
</ul>

<!-- CORRECT: nested ul inside li -->
<ul>
  <li>
    Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

Stili dei punti elenco a più livelli

I browser applicano punti elenco predefiniti diversi a ogni livello di annidamento:

<ul>
  <li>Level 1 — disc (filled circle)</li>  <!--  • -->
  <ul>
    <li>Level 2 — circle (open circle)</li>  <!--  ○ -->
    <ul>
      <li>Level 3 — square</li>             <!--  ▪ -->
    </ul>
  </ul>
</ul>

Reimpostare con CSS

Sostituisca gli stili degli elenchi annidati con CSS:

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style each level explicitly */
.nav > li > ul {
  padding-left: 1rem;
  list-style: disc;
}

Elenchi numerati annidati

Elenchi ordinati annidati con tipi diversi:

<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background</li>
      <li>Motivation</li>
    </ol>
  </li>
  <li>Methods
    <ol type="a">
      <li>Data collection</li>
    </ol>
  </li>
</ol>

Contatori CSS per la numerazione personalizzata

Numerazione gerarchica personalizzata con i contatori CSS:

ol {
  list-style: none;
  counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }

ol ol {
  counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
  content: counter(level1) '.' counter(level2) ' ';
}

Pattern di navigazione a fisarmonica

Un elenco annidato può diventare una barra laterale di navigazione espandibile:

<ul class="tree-nav">
  <li>
    <details>
      <summary>Frontend</summary>
      <ul>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
    </details>
  </li>
  <li><a href="/backend">Backend</a></li>
</ul>

Spaziatura degli elenchi annidati

Controlli il rientro visivo con CSS:

ul {
  padding-left: 1.5rem;  /* Controls indent at each level */
  margin: 0.5rem 0;
}

/* Tighter nested spacing */
ul ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

Ripasso dell'abbreviazione list-style

Tutte le proprietà dello stile degli elenchi combinate:

/* Shorthand: type position image */
ul {
  list-style: square inside;
}

/* Longhand equivalents: */
ul {
  list-style-type: square;
  list-style-position: inside;   /* inside or outside */
  list-style-image: none;
}

Icone personalizzate come marcatori dell'elenco

Utilizzi SVG o emoji come marcatori dell'elenco:

ul.checklist {
  list-style: none;
  padding: 0;
}

ul.checklist li::before {
  content: '✓ ';
  color: #22c55e;
  font-weight: bold;
}

/* Or with a background SVG */
ul.icon-list li {
  padding-left: 2rem;
  background: url('/icons/arrow.svg') no-repeat 0 0.2em;
  background-size: 1rem 1rem;
  list-style: none;
}

Accessibilità degli elenchi annidati

Elenchi annidati e lettori di schermo:

  • I lettori di schermo annunciano il livello di annidamento e il numero di elementi
  • Un annidamento profondo (4 o più livelli) crea confusione: si limiti a un massimo di 2-3 livelli
  • Se utilizza list-style: none sull'elenco esterno, aggiunga role="list"

Verifica rapida

Dove deve essere inserito un elenco annidato all'interno di un elenco esterno?

Riepilogo: elenchi annidati

Concetti essenziali degli elenchi annidati:

  • Inserisca gli elenchi all'interno di <li> — mai direttamente in <ul>
  • Per impostazione predefinita, i browser usano: disco → cerchio → quadrato a ogni livello
  • I contatori CSS consentono di creare numerazioni gerarchiche personalizzate
  • Per una migliore usabilità, limiti l'annidamento a 2-3 livelli
  • Utilizzi <details>+<summary> per una navigazione annidata espandibile

Domande Frequenti

La lezione «Elenchi annidati e stili degli elenchi» è gratuita?

Sì — il testo completo di «Elenchi annidati e stili degli elenchi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Elenchi annidati e stili degli elenchi»?

Annidare gli elenchi l’uno nell’altro e controllarne l’aspetto Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Elenchi annidati e stili degli elenchi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Elenchi non ordinati: ul e li
  2. Elenchi ordinati: ol, start, reversed e type
  3. Elenchi descrittivi: dl, dt e dd
  4. Elenchi annidati e stili degli elenchi
← Torna a HTML Academy