CSS counters или как задать стили для чисел в списках

Уверен, вы прекрасно знаете про нумерованные и ненумерованные списки (или же, как их еще называют, маркированные списки). Но как быть в случае, когда у нас уникальный дизайн, а соответственно и стили для таких вот списков тоже выглядят весьма уникально?

Как использовать счетчики в CSS

Подумайте сами, вот у вас макет, с такими красивыми цифрами в кружке и сами цифры размером в 30 пикселей а вот текст после них уже гораздо меньше 🙂 . Тут есть 3 пути решения (а на самом деле их гораздо больше) :

  1. вы можете нарезать это все картинками;
  2. вы можете записать все это статически через другие теги (нормальный вариант, даже для 20 элементов, если знать как быстро сформировать HTML);
  3. и наконец — использовать CSS counters.

Кстати говоря, мы рассматриваем вариант без использования JavaScript, PHP, Python и других языков программирования.
Для начала убираем наши стандартные стили у элементов списка (можно не только это делать для списков, но рассмотрим на примере их, плюс, мне кажется, так будет более верно):

li { list-style-type: none; }

Наш HTML:

<ol class="my-super-list">
  <li>...</li>
  <li>...</li>
</ol>

и начинаем.. КВН? нет — CSS 🙂

.my-super-list { counter-reset: list; }

Очень важно использовать именно на родительском элементе, а не на всех ol, как об этом вы могли прочитать в документации. Используем именно конкретный класс, не забывайте про нормальные нумерованные элементы на странице.
list — это некая переменная, которая будет увеличиваться с каждым элементом li

.my-super-list li:before {
    counter-increment: list; /* Увеличиваем значение счетчика */
    content: counter(list); /* Выводим обычное число */
}

Если вам понадобится более сложные махинации с числами, например 1.1, 1.2, 1.3 — то наш HTML будет

<ol class="my-super-list">
   <li>Пункт</li>
    <ol class="my-sub-super-list">
     <li>Подпункт</li>

А CSS:

li { list-style-type: none; }

.my-super-list { counter-reset: list; }

.my-super-list li:before {
  counter-increment: list;
  content: counter(list) ". "; /* Добавим точку для наглядности */
}

.my-super-list .my-sub-super-list { counter-reset: list2; } /* имя переменной вложенного списка */

.my-super-list .my-sub-super-list li:before {
  counter-increment: list2; /* Увеличиваем значение переменной вложенного списка */
  content: counter(list) "." counter(list2) ". "; /* Выводим число в виде 1.1, 1.2 и т.д. */
}

Думаю с этим вы разберетесь. Последнее, что хотелось бы добавить —  т.к. мы используем :before, то для позиционирования:

.my-super-list li { position: relative; }

.my-super-list li:before{
  position: absolute;
  left: 0;
  top: 5px;
}

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *