0Pricing
HTML Academy · Aula

Listas aninhadas e estilos de listas

Aninhar listas dentro de listas e controlar o seu aspeto.

Listas aninhadas e estilos de listas é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Aninhando listas

As listas podem ser aninhadas dentro de elements <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>

Aninhamento correto

A lista aninhada deve estar inside de um elemento <li>, não ser um filho direto de <ul> ou <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 marcadores em vários níveis

Os navegadores aplicam marcadores padrão diferentes em cada nível de aninhamento:

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

Redefinindo com CSS

Substitua os estilos das listas aninhadas com CSS:

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

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

Listas aninhadas numeradas

Listas ordenadas aninhadas com tipos diferentes:

<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 numeração personalizada

Numeração hierárquica personalizada com 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) ' ';
}

Padrão de navegação sanfonada

Uma lista aninhada pode se transformar em uma navegação lateral expansível:

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

Espaçamento de listas aninhadas

Controle a indentação visual com 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;
}

Revisão da abreviação list-style

Todas as propriedades 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;
}

Ícones personalizados como marcadores de lista

Use SVG ou emoji 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;
}

Acessibilidade de listas aninhadas

Listas aninhadas e leitores de tela:

  • Os leitores de tela anunciam o nível de aninhamento e a quantidade de itens
  • Aninhamento profundo (4 ou mais níveis) é confuso — mantenha no máximo 2 a 3 níveis
  • Se usar list-style: none na lista externa, adicione role="list"

Verificação rápida

Onde uma lista aninhada deve ser colocada dentro de uma lista externa?

Resumo: listas aninhadas

Elementos essenciais das listas aninhadas:

  • Aninhe listas dentro de <li> — nunca diretamente em <ul>
  • Por padrão, os navegadores usam: disco → círculo → quadrado a cada nível
  • Os contadores CSS permitem uma numeração hierárquica personalizada
  • Limite o aninhamento a 2–3 níveis para facilitar o uso
  • Use <details>+<summary> para criar uma navegação aninhada expansível

Perguntas Frequentes

A aula “Listas aninhadas e estilos de listas” é grátis?

Sim — o texto completo de “Listas aninhadas e estilos de listas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Listas aninhadas e estilos de listas”?

Aninhar listas dentro de listas e controlar o seu aspeto. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Listas aninhadas e estilos de listas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Listas não ordenadas: ul e li
  2. Listas ordenadas: ol, start, reversed e type
  3. Listas de descrição: dl, dt e dd
  4. Listas aninhadas e estilos de listas
← Voltar para HTML Academy