Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

CSS counter-increment

Хэллоу друзья и поехали. Сегодня мы с вами рассмотрим работу с счетчиками в 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. Подставляемый контент с помощью данных псевдоселекторов не может быть выделен пользователем. Помните про это.

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

Оцените статью

Еще статьи

клавиши js

база данных php

библиотека tkinter

css отражение

meter html

ЧПУ htaccess

screen javascript

phpQuery php

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.