Як змінити стиль чисел у списку?

18.10.2013

Влад Мержевич

Завдання

Через стилі встановити колір, розмір, шрифт та інші параметри для чисел у нумерованому списку.

Рішення

У браузері 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.

Для універсальності рекомендується прибрати початкову нумерацію та зробити її за допомогою властивостей 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>

Оскільки числа вставляються перед текстом елементів списку, наша нумерація виявляється трохи правіше, ніж оригінальна (малюнок 2). Враховуйте цей момент при створенні списку.

Завдання

Рішення

Часті запитання