Если вы заботитесь о написании правильного HTML кода, то задача определения порядка вывода элементов списков может показаться ерундовой. Однако и тут могут быть нюансы, а решение может быть в использовании HTML + CSS. Многие разработчики теряют надежду найти решение и используют метод, доступный по умолчанию. На самом деле, ответ не сложен, особенно если использовать HTML5.

Вывод нумерованного списка с определённого числа

По умолчанию, все нумерованные списки начинаются с единицы. Это становится проблемой, если один и тот же список нужно разделить параграфом:

01<h2>My Top Five Movies</h2>
02<ol>
03<li>Star Wars
04<li>The Matrix
05<li>Mr. & Mrs. Smith
06<li>Wanted
07</ol>
08<p>Yes, I know those are Angelina Jolie movies. What can I say? I’m a fan.
09<ol>
10<li>Rashomon
11</ol>

По умолчанию, новый список начнётся с 1. Для того чтобы начать новый список с определённого числа, воспользуйтесь атрибутом start:

1<ol start=5>
2<li>Rashomon
3</ol>

Результат будет примерно такой:

Вывод в обратном порядке

Если вы хотите вывести элементы списка в обратном порядке, то воспользуйтесь атрибутом reversed:

1<h3>Countdown Sequence Start</h3>
2<ol reversed>
3<li>Ignition
4<li>Engine start
5<li>Liftoff
6</ol>

Результат:

Самое сложное в нумерованных списках — это правильная нумерация в нужном нам виде: к примеру, 5.1 или 3.7; Для контроля отображения порядка чисел в CSS можно воспользоваться специальными счётчиками:

К примеру, вы хотите ряд списков, которые будут начинаться подобно числу 1.1. Сначала, нам нужно написать правильный HTML:

01<h2>Legalese</h2>
02<ol>
03    <li>Flibbert
04    <ol>
05        <li>Flibberme
06        <li>Giblet
07    </ol>
08    <li>Me Giblets
09    <ol>
10    <li>Beep
11    <li>Bop
12    <li>Boop
13    </ol>
14</ol>

Счётчик увеличивается, когда встречает нужный элемент.

Для начала, уберём стандартное отображение номеров списков:

1ol { list-style-typenone; }

Затем, указываем счётчику сбиваться и переходить на следующий номер при каждом новом элементе ol:

1ol { counter-reset: section; }

При встрече каждого элемента li, увеличиваем счётчик подсписка на 1:

1li { counter-increment: section; }

Перед каждым (не декорированным) элементом списка, вывести контент, включая текущий посчитанный номер:

1li { contentcounters(section, "."" "; }

Результат:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/688/Custom-HTML-Ordered-Lists-Reversed-Reordered-and-PointNumbered
Перевел: Станислав Протасевич http://ruseller.com/lessons.php?rub=2&id=1748
Урок создан: 31 Мая 2013

 

Простой пример: 20130603-2.ll