Нумеруем абзацы с помощью 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 для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу
