| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Задати число з допомогою стилів, з якого буде починатися нумерація в списку.
Рішення
Зміна числа, з якого починається нумерований список, відбувається з допомогою атрибута start тега <ol>. Однак при використанні суворого <!DOCTYPE> код не проходить валідацію з-за наявності цього атрибута. Застосування стилів обходить цю проблему і дозволяє зробити код більш гнучким. Для цього знадобляться стильові властивості counter-reset, counter-increment і content. Властивість counter-reset встановлює змінну, в якій буде зберігатися значення лічильника, а також бажаний номер списку. Інші властивості змінюють значення лічильника і займаються виведенням нумерації (приклад 1).
Приклад 1. Список, що починається з п'яти
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нумерований список</title>
<style>
li { list-style-type: none; } /* Прибираємо вихідну нумерацію у списку */
ol { counter-reset: list 4; } /* Ініціюємо лічильник */
ol li:before {
counter-increment: list; /* Збільшуємо значення лічильника */
content: counter(list) ". "; /* Виводимо число */
}
</style>
</head>
<body>
<ol>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ol>
</body>
</html>
Результат приклад показаний на рис. 1.
Рис. 1. Нумерований список
Обговоримо деякі нюанси наведеного коду.
- змінна list обрана довільно, можете замінити її на іншу;
- ім'я змінної list повинен обов'язково збігатися у властивостях counter-reset і counter-increment;
- з-за того, що в стилі лічильник ініціюється і збільшується одночасно, ставиться не бажане значення номера, а на одиницю менше (у прикладі 4 замість 5);
- допускається використовувати негативні значення лічильника, наприклад -1, тоді список почнеться з нуля;
- Internet Explorer до версії 8.0 не підтримує використовувані властивості, список буде показаний без нумерації.