✔Изменить стиль чисел в списке - «Маркированный список»
| 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
HTML5CSS3IECrOpSaFx
<!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. Изменение вида списка
HTML5CSS3IECrOpSaFx
<!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