| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 4.0+ | 9.5+ | 3.2+ | 2.0+ | 2.1+ | 3.2+ |
Завдання
Через стилі встановити колір, розмір, шрифт і інші параметри у чисел в нумерованном списку.
Рішення
У браузері Firefox визначення стилів нумерації в списку відбувається за допомогою псевдокласу ::-moz-list-number, який додається до селектору li. Після чого достатньо написати бажані правила, як показано в прикладі 1.
Приклад 1. Використання ::-moz-list-number
HTML5,CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список</title>
<style>
li::-moz-list-number {
color: red; /* Колір */
font-style: italic; /* Курсив */
}
</style>
</head>
<body>
<ol>
<li>Перший</li>
<li>Другий</li>
<li>Третій</li>
<li>Четвертий</li>
</ol>
</body>
</html>
Результат цього прикладу в Firefox показаний на рис. 1.
Рис. 1. Стиль нумерації в списку
Область застосування даного псевдокласу обмежена лише Firefox; в інших браузерах, на жаль, його аналога немає. Тому для універсальності варто піти іншим шляхом — взагалі прибрати вихідну нумерацію і зробити її з допомогою набору властивостей counter-reset і counter-increment. Висновок такої нумерації робиться через псевдоелемент ::before і властивість content, як показано в прикладі 2.
Приклад 2. Зміна вигляду списку
HTML5,CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список</title>
<style>
ol {
list-style-type: none; /* Прибираємо вихідні маркери */
counter-reset: num; /* Задаємо ім'я лічильника */
}
li::before {
content: counter(num) '. '; /* Виводимо число */
counter-increment: num; /* Збільшуємо значення лічильника */
color: red;
font-style: italic;
}
</style>
</head>
<body>
<ol>
<li>Перший</li>
<li>Другий</li>
<li>Третій</li>
<li>Четвертий</li>
</ol>
</body>
</html>
Для початку списку ховаємо рідну нумерацію, задаючи значення none у властивості list-style-type. Можна замість нього використовувати універсальне властивість list-style, в даному випадку результат буде однаковий. Далі ініціюємо лічильник, задаючи потрібне ім'я у властивості increment-reset. Це ім'я нам знадобиться надалі для виведення номери і його інкрементування (збільшення на одиницю). Сам висновок відбувається властивістю content, воно працює у зв'язці з псевдоелементом ::before. До нього ж додаємо довільні властивості для стилізації чисел списку.
Оскільки вставка чисел відбувається перед текстом пунктів списку, то наша нумерація виявляється зрушена трохи правіше, ніж оригінальна (рис. 2). Враховуйте цей момент при створенні списку.
Рис. 2. Нумерація, зроблена через ::before