0Pricing
HTML Academy · Lección

Listas anidadas y estilos de listas

Anide listas dentro de otras listas y controle su apariencia.

Listas anidadas y estilos de listas es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Anidamiento de listas

Las listas se pueden anidar dentro de elementos <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>

Anidamiento correcto

La lista anidada debe estar dentro de un elemento <li>, no ser un hijo directo de <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>

Estilos de viñeta en varios niveles

Los navegadores aplican viñetas predeterminadas diferentes en cada nivel de anidamiento:

<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>

Restablecimiento con CSS

Puede sustituir los estilos de las listas anidadas con CSS:

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

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

Listas anidadas numeradas

Listas ordenadas anidadas con distintos tipos:

<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>

Contadores CSS para numeración personalizada

Numeración jerárquica personalizada con contadores 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) ' ';
}

Patrón de navegación en acordeón

Una lista anidada puede convertirse en una navegación lateral expandible:

<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>

Espaciado de listas anidadas

Controle la sangría visual 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;
}

Repaso de la abreviatura list-style

Todas las propiedades de estilo de lista combinadas:

/* 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;
}

Iconos personalizados como marcadores de lista

Use SVG o emojis como marcadores de lista:

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;
}

Accesibilidad de las listas anidadas

Listas anidadas y lectores de pantalla:

  • Los lectores de pantalla anuncian el nivel de anidamiento y el número de elementos
  • Un anidamiento profundo (4 niveles o más) resulta confuso; manténgalo en 2 o 3 niveles como máximo
  • Si usa list-style: none en la lista exterior, añada role="list"

Comprobación rápida

¿Dónde se debe colocar una lista anidada dentro de una lista exterior?

Repaso: listas anidadas

Aspectos esenciales de las listas anidadas:

  • Anide las listas dentro de <li>; nunca directamente en <ul>
  • De forma predeterminada, los navegadores utilizan: disc → circle → square en cada nivel
  • Los contadores de CSS permiten crear numeración jerárquica personalizada
  • Limite el anidamiento a 2 o 3 niveles para facilitar el uso
  • Utilice <details>+<summary> para la navegación anidada expandible

Preguntas frecuentes

¿La lección «Listas anidadas y estilos de listas» es gratis?

Sí — el texto completo de «Listas anidadas y estilos de listas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Listas anidadas y estilos de listas»?

Anide listas dentro de otras listas y controle su apariencia. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Listas anidadas y estilos de listas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Listas no ordenadas: ul y li
  2. Listas ordenadas: ol, start, reversed y type
  3. Listas de descripción: dl, dt y dd
  4. Listas anidadas y estilos de listas
← Volver a HTML Academy