Многоуровневые списки, как в MS Word

Как с помощью HTML/CSS можно верстать многоуровневые нумерованные списки "как в ворде"? Сначала мне в голову пришел только извратный вариант использования list-style-image или background-image, где нумерация типа «1.3.» задавалась бы графикой. Дурацкая идея, конечно.

Но затем я вспомнил о некоторых замечательных CSS свойствах. Полистав спецификацию, я понял, что задача решаема, и при этом будет сохранена семантика в HTML.

Итак, многоуровневый список:

1. Максим Горький
   1. Автобиографические повести
      1. Детство
      2. В людях
      3. Мои университеты
   2. Пьесы
      1. Мещане
      2. На дне
      3. Дачники
   3. Романы
      1. Фома Гордеев
      2. Трое
      3. Мать
2. Чехов А.П.
   1. Повести
      1. Степь
      2. Дуэль
      3. Мужики
   2. Пьесы
      1. Дядя Ваня
      2. Три сестры
      3. Вишневый сад
   3. Рассказы
      1. Ионыч
      2. Крыжовник
      3. Человек в футляре

Исходный код этого примера:

<style>
    ol {
        list-style: none;
        counter-reset: li;
    }
    ol li:before {
        counter-increment: li;
        content: counters(li,".") ". ";
    }
</style>
<ol>
    <li>
        Максим Горький
        <ol>
            <li>
                Автобиографические повести
                <ol>
                    <li>Детство</li>
                    <li>В людях</li>
                    <li>Мои университеты</li>
                </ol>
            </li>
            <li>
                Пьесы
                <ol>
                    <li>Мещане</li>
                    <li>На дне</li>
                    <li>Дачники</li>
                </ol>
            </li>
            <li>
                Романы
                <ol>
                    <li>Фома Гордеев</li>
                    <li>Трое</li>
                    <li>Мать</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        Чехов А.П.
        <ol>
            <li>
                Повести
                <ol>
                    <li>Степь</li>
                    <li>Дуэль</li>
                    <li>Мужики</li>
                </ol>
            </li>
            <li>
                Пьесы
                <ol>
                    <li>Дядя Ваня</li>
                    <li>Три сестры</li>
                    <li>Вишневый сад</li>
                </ol>
            </li>
            <li>
                Рассказы
                <ol>
                    <li>Ионыч</li>
                    <li>Крыжовник</li>
                    <li>Человек в футляре</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Обратите внимание на пробел во фрагменте ". ". С его помощью мы создаём отступ между нумерацией и текстом.

HTML-код получается простым и семантически верным.

Теорию про счётчики и автоматическую нумерацию можно почитать в спецификации.

Автор: Шуркаев Александр Владимирович
Источник: Заметки HTML кодера