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