Unidad 4. Listas (IV)



4.4. Listas anidadas

Las listas de pueden anidar, podemos incluir una lista dentro de otra, cada lista tiene su propia numeración independiente de las otras listas.

Por ejemplo, esta lista ordenada contiene otras dos listas ordenadas.

  1. Frutas
    1. Manzanas
    2. Naranjas
    3. Peras
  2. Verduras
    1. Lechugas
    2. Zanahorias

Este es el código:

<ol > 
<li>Frutas</li>
<ol>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
<li>Verduras</li>
<ol>
<li>Lechugas</li>
<li>Zanahorias</li>
</ol>
</ol>

Para dar estilo a la lista anidada podemos usar la forma de anidar selectores de las hojas de estilo, por ejemplo: ol ol { list-style-type: lower-roman; } para dar estilo a las listas ordenadas de un nivel de anidamiento. Obtendriamos el siguiente resultado:

  1. Frutas
    1. Manzanas
    2. Naranjas
    3. Peras
  2. Verduras
    1. Lechugas
    2. Zanahorias

Por supuesto, también podemos dar estilo a las listas anidadas utilizando una clase CSS y asignándola a la lista anidada.


Enero-2019 (V 2.0)
Pág. 4.4
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.