Нумерация CSS counter

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

Замечательно что, свойство автоматической нумерации на языке CSS - это даёт гибкость и простоту в установке.

Основные свойства

Присвоим имя переменной shag

Для родителя применяем свойство counter-reset с значением переменной, а детям (дочерним объектам) указывает переменную родителя.

Родитель и дети Html и Css
.parent{
    counter-reset: shag;
}
.parent .child:after{
    content: counter(shag);
    counter-increment: shag;
}
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

Если нужно несколько счётчиков внутри содержимого, то для родителя синтаксис будет следующий:

.parent{
    counter-reset: shag step;
}
Комментарии - 0
для добавления комментария
пожалуйста войдите или зарегистрируйтесь
Хостинг от uCoz