.
Самонаследуемость счетчиков и как ее использовать
Дисклеймер: Счётчики описаны в спецификации css-lists-3. Здесь я расскажу об их "самонаcледуемости". Первую статью с основной теорией про счетчики можно прочитать здесь.
Счетчики в css являются "самонаследуемыми".
Что это такое?
Как можно узнать из предыдущей статьи про счетчики, каждый элемент наследует от родителя набор счетчиков, который дополняет своими и передает для наследования дальше вниз по дереву.
Создание на элементе счетчика с таким же именем, как у одного из наследованных, создаст не самостоятельный новый счетчик, а вложенный в наследованный.
Такие вложенные счетчики отличаются от обычных только тем, что могут быть полученные все вместе, одним
списком, с помощью функции counters(), которая отдает значения всех счетчики с заданным именем.
Тогда как обычная функция counter() извлекает только самый внутренний счетчик с таким именем.
Таким образом, область действия счетчика начинается с первого элемента в документе, который создает экземпляр этого счетчика, и включает в себя детей этого элемента.
Как это использовать?
Использую самонаследуемость счетчиком можно сделать нумерацию большого списка со сложной вложенностью, используя всего один счетчик!
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
<style>
ul {
counter-reset: n;
}
li {
counter-increment: n;
}
li::before {
content: counters(n, '.');
}
</style>
В демо список немного расширен список для наглядности относительно кода сверху и выглядит это так:
Как это работает?
На каждом элементе ul создается счетчик с именем n. Но на внутренних элементах
ul он создается не самостоятельный, а вложенный в наследованный от родителя счетчик с таким же
именем. Поэтом можно достать их всех разом с помощью функции counters() на элементе списка.
Второй необязательный параметр этой функции – строка-разделитель для отображения списка счетчиков. Работает
так же, как аргумент функции Array.prototype.join()
в JavaScript.
Источники
- Спецификация css-list-3