✔Изменить стиль чисел в списке - «Маркированный список»

26 марта 2016 991 Самоучитель CSS / Списки 0

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