CSS счётчики

Как видно из названия, CSS счётчики это всего лишь счётчик элементов, которые мы используем. В основном они применяются для стилизации номеров, которые в нумерованном списке <ol>, например, нельзя стилизовать. Именно для этих целей и служат CSS счётчики. Ну и чтобы ручками чиселки не писать, конечно же, мы же программисты.. Если не оптимизировать то, что можно оптимизировать, то сердчеко болеть будет.

 

И так, приступим. У нас есть вот такой макет:

 

 

Сама стилизация нас мало интересует, т.к. мы здесь только за счётчиками.

 

Для начала рассмотрим нужные нам CSS свойства:

 

counter-reset: counterName;

 

С помощью этого свойства инициализируется значение счётчика. counterName – это имя нашего счётчика, оно может быть любым.

 

counter-increment: counterName;

 

Это свойство конечно же инкрементирует наш счётчик (+1; декремент -1). counterName – это имя нашего счётчика, которое мы задали изначально.

 

counter()/counters()

 

Это функция, с помощью которой можно отобразить значение нашего счётчика. counters() используется для вложенных списков, об этом будет чуть дальше.

 

И это всё, что нам нужно. Правда всё. Приступим. У нас есть конечно же нумерованный список <ol> (не забываем о семантике – раз в списке есть номера элементов, значит он нумерованный). У него нужно сбросить исходные маркеры в виде стандартных цифр с помощью list-style-type: none;. Теперь у нас есть просто список без номеров. Как же вставить эти числа, чтобы не ручками в отдельный <span>? А очень просто. Нам нужен псевдоэлемент :before для элементов <li>, где мы инкрементируем наш счётчик и отобразим его значение на странице. Итоговый код будет такой: 

 

ol {
  list-style: none;
  counter-reset: ourCounter;
}
li:before {
  content: counter(ourCounter);
  counter-increment: ourCounter;
}

 

Вот и всё, теперь у нас есть активный счётчик, который будет добавлять нужную цифру для каждого элемента <li>. Eго-то и нужно стилизовать как душе угодно.

 

Теперь поговорим о вложенных списках.

 

<ol>
  <li>первый элемент</li>
  <li>второй элемент </li>
  <li>третий элемент </li>
  <li>четвёртый элемент
    <ol>
      <li>первый элемент четвёртого элемента</li>
      <li>второй элемент четвёртого элемента</li>
    </ol>
  </li>
</ol>

 

Если следовать всем инструкциям и для каждого <ol> инициализировать свой счётчик, то «первый элемент четвёртого элемента» получит цифру 1. Именно для решения этой проблемы служит функция counters(). Рассмотрим CSS, он будет очень похожим:

 

ol {
  list-style: none;
  counter-reset: ourCounter;
}
li:before {
  content: counters(ourCounter, “.”) “ “;
  counter-increment: ourCounter;
}

 

Всё, именно так. Теперь разберём что за странные штуки добавились. counters() вторым аргументов принимает разделитель между вложенными элементами, то бишь наш «первый элемент четвёртого элемента» получит цифры 4.1. Во второй аргумент можно писать всё что угодно. А вторые кавычки зачем? Просто для красоты, чтобы разделить цифры от текста пробелом. Вот и всё. Если нам нужна поддержка IE8, то нужно обязательно убедиться, что после нашего разделителя “.” нет пробела.
Так же нужно учесть, что счётчик не будет работать на элементе, который скрыт с помощью display: none; что вполне логично, элемент же убран из потока документа.

 

Данная статья точно пригодится тем, кто хочет и будет верстать, т.к. такие нумерованные списки встречаются повсеместно. А для полного закрепления материала я подготовил песочницу. 

А ещё у меня предложение: в этой же песочнице сделайте вложенные списки и кидайте итоговый результат в комментарии к данной статье. Практика никогда не помешает. Удачи!

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!