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. Obtendríamos 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.

 Cursos Informática Gratuitos