Listas numeradas com sub-tópicos em CSS

Para fazer listas numeradas com html básico, usamos as tags ol e il. A primeira indica uma lista ordenada e a segunda gera o item da lista propriamente dito.

Se usamos um ambiente ol dentro de outro, teremos uma lista com sub-tópicos. Assim:

1. item 1
2. item 2
   
   1. subitem 1
   2. subitem 2
3. item 3

O código-fonte para esta lista fica assim:

	<ol>
	<li>item 1</li>
	<li>item 2
	<ol>
	<li>subitem 1</li>
	<li>subitem 2</li>
	</ol></li>
	<li>item 3</li>
	</ol>

view raw simple_nested_list.html hosted with ❤ by GitHub

Em editores de texto, é comum aplicar numeração de acordo com a numeração do tópico principal. Dessa maneira, a numeração dos subitens ficaria 1.1, 1.2, 1.3 e assim por diante. Depois de alguma pesquisa, encontrei um jeito simples de fazer isso usando apenas CSS. Veja como fica:

1. item 1
2. item 2
   
   1. subitem 1
   2. subitem 2
3. item 3

A compatibilidade de navegadores é ampla. Eu postei essa resposta lá no StackOverflow. Confira o código-fonte (HTML + CSS):

	<ol class="nested">
	<li class="nested">item 1</li>
	<li class="nested">item 2
	<ol class="nested">
	<li class="nested">subitem 1</li>
	<li class="nested">subitem 2</li>
	</ol></li>
	<li class="nested">item 3</li>
	</ol>

view raw numbered_nested_list.html hosted with ❤ by GitHub

	ol.nested
	{
	counter-reset: item
	}
	li.nested
	{
	display: block
	}
	li.nested:before
	{
	content: counters(item, ".") ". ";
	counter-increment: item
	}

view raw numbered_nested_list.css hosted with ❤ by GitHub