Войти
Регистрация

Нумеруем абзацы с помощью CSS counters

Нумеруем абзацы с помощью CSS counters

В одной из статей сайта я рассказывал про списки в HTML, где можно было создать нумерованный список.

В этой статье хочу предложить Вам еще один вариант нумерации, который осуществляется только с помощью CSS и дает возможность пронумеровать каждый элемент родительского блока, а также вывести сумму этих элементов.

Вы наверное замечали на сайтах с комментариями идет подсчет этих комментариев. Это либо осуществлено при помощи php, либо с помощью свойств CSS, которые я опишу ниже.

Предположим, что у нас есть блок с абзацами, содержащими некий текст, например списокстати й и в самом низу строка с количеством статей:

<div class="articles">
   <p>Статья про животных</p>
   <p>Статья про строительство</p>
   <p>Статья про автомобили</p>
   <p>Статья про путешествия</p>
   <p>Статья про спорт</p>
   <p>Статья по программированию</p>
   <span>Всего статей на странице-</span>
</div>

Мы можем пронумеровать каждый абзац при помощи свойств counter-reset и counter-increment. Для этого напишем CSS правило для блока с классом .articles и для содержащихся в нем абзацев.

.articles {
   counter-reset: art;
}
.articles p:before {
   counter-increment: art;
   content: ""counter(art)". ";
}
.articles span:after {
   content: ""counter(art)"";
}

Разберем по "косточкам" все, что написано.

Вначале мы для блока с классом .articles задали свойство counter-reset и в качестве значения указали идентификатор art, можете указать другое название, не имеет значения. В нем устанавливается начальное значение счетчика элементов, а также будет записываться новое значение счетчика.

Далее для псевдоэлемента тега <p> указываем свойство counter-increment, в значении указываем наш идентификатор счетчика art. Этим свойством мы высчитываем порядковый номер абзаца, добавляем его в идентификатор и выводим в свойстве content, т.е. псевдоэлемент абзаца будет содержать его порядковый номер.

Иными словами, идентификатор art в самом начале имеет значение = 0, затем идет подсчет абзацев, после каждого абзаца этот идентификатор увеличивается на 1.

И в конце мы создаем псэвдоэлемент для тега <span>, в котором выведем количество абзацев, по сути выводим последнее значение идентификатора art. Важно этот <span> указать после всех абзацев, чтобы сначала произошел подсчет всех абзацев и потом вывелась сумма.

Результат будет таким:

Статья про животных

Статья про строительство

Статья про автомобили

Статья про путешествия

Статья про спорт

Статья по программированию

Всего статей на странице -

Если Вы хотите, чтобы счетчик начал отсчет не с 0, а скажем, с 5, то в свойстве counter-reset после идентификатора art через пробел укажите с какого номера счетчик будет стартовать.

.articles {
   counter-reset: art 5;
}

Надеюсь после прочтения этой статьи у Вас появились некоторые задумки по реализации такой нумерации и подсчета.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?