Хэллоу друзья и поехали. Сегодня мы с вами рассмотрим работу с счетчиками в css.

Все мы конечно же знакомы с нумерованными списками, пример:

<ol >
    <li>Россия</li>
    <li>Аргентина</li>
    <li>Испания</li>
    <li>Бразилия</li>
</ol>

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

<style>
    .container  {
        counter-reset: iter;
    }
    .container div:before {
        counter-increment: iter;
        Content:  counter(iter)". " ;
    }
</style>
<div class="container">
    <div>Россия</div>
    <div>Аргентина</div>
    <div>Испания</div>
    <div>Бразилия</div>
</div>

Здесь мы реализовали нумерацию для элементов div в контейнере container. Обратите внимание на стили. C помощью свойства counter-reset мы установили в главном контейнере счетчик с названием iter. Названия можете придумывать любые. В дочерных элементах в контейнере, с помощью свойства counter-increment мы указали что счетчик с названием iter с каждым новым элементом div будет увеличиваться на одну единицу. Мы можем указывать на сколько единиц на каждой итерации будет увеличиваться счетчик, пример:

counter-increment: iter 10;

Здесь у нас счетчик на каждой новой итерации увеличивается на 10. Причем заметьте счет также начинается с 10.

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

Вот так работают счетчики в css. В чем же может быть преимущество использования счетчиков css по сравнению с теми же списками. Давайте посмотрим.

<style>
    .container  {
        counter-reset: iter;
    }
    .container div:after {
        counter-increment: iter;
        Content: " - "counter(iter)" место " ;

    }
    .container:after  {
        Content:'Всего участников 'counter(iter);
    }
</style>
<div class="container">
    <div>Россия</div>
    <div>Аргентина</div>
    <div>Испания</div>
    <div>Бразилия</div>
</div>

Однако помните, функцию counter() мы можем использовать только в свойстве Content. Следовательно вывод номеров производится только через псевдоселекторы before и after. Подставляемый контент с помощью данных псевдоселекторов не может быть выделен пользователем. Помните про это.

На этом данная статья подошла к концу. Желаю вам успехов и удачи! Пока!