Счетчики и стили списков

Многие типы контента лучше всего представлять в виде HTML- списка . Для упорядоченного контента в виде списков, например, шагов рецепта или сносок к статье, маркер часто также содержит информацию. CSS предоставляет несколько способов управления счетчиками в списке.

Стили списков

Существует широкий спектр предопределенных типов списков, поддерживающих числа, алфавитный порядок, римские цифры и многие международные системы счисления.

В дополнение к стилям, поддерживаемым браузерами, W3C опубликовала готовые стили счетчиков , поддерживающие 181 дополнительный стиль в 45 системах письма.

Если эти варианты вам не подходят, вы также можете определить собственный @counter-style . Это позволит вам указать пользовательские символы, префикс и суффикс и многое другое.

По умолчанию маркер элемента находится outside списка, расположен перед списком и выровнен по правому краю. Вы также можете разместить маркер элемента внутри списка, используя list-style-position: inside .

Счетчики

В то время как стили списка управляют отображением маркеров элементов списка, счетчики позволяют управлять отображаемыми значениями. Для элементов списка <li> браузер создает счетчик с именем list-item , который увеличивается на 1 для каждого встреченного элемента списка.

CSS-счетчики ведут текущий подсчет количества отрисовок элемента, для которого задано соответствующее значение counter-increment .

Для создания нового счетчика используйте counter-reset , указав имя счетчика и, при необходимости, начальное значение. Чаще всего это значение устанавливается для родительского элемента, содержащего все элементы, которые будут учитываться.

Затем добавьте свойство counter-increment к каждому элементу, который вы хотите подсчитать.

Наконец, отобразите значение счетчика, используя функцию counter() .

В этом примере мы хотим отобразить текущий счетчик сносок в качестве текста ссылки для каждой сноски. Поскольку нам нужен один счетчик для всего документа, мы устанавливаем counter-reset: note для основного текста и increment для каждой ссылки на сноску.

Также можно использовать несколько счетчиков, подсчитывающих разные элементы. В примере со сносками, что, если бы вы хотели отобразить индекс раздела и абзаца, в котором находится сноска?

Счетчик разделов можно создать в теле документа с помощью counter-reset , а затем увеличивать его значение для каждого элемента <h2> `. Нам нужно, чтобы счетчик абзацев сбрасывался для каждого раздела, поэтому мы будем использовать counter-reset для элементов <h2> ` и увеличивать его значение для элементов <p> .

Наконец, мы объединяем значения счетчиков в свойстве content .

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

Вложенные счетчики

Что происходит, когда вы вкладываете список в список? Счетчик list-item инициализируется для каждого элемента <ul> или <ol> , и использование функции counter() возвращает только значение самого внутреннего счетчика. Если вы хотите отобразить значение каждого из вложенных счетчиков, используйте функцию counters() , которая принимает имя счетчика и разделитель.

li::marker {
  content: counters(list-item, ".")
  }

Реверсирование счетчиков

По умолчанию счетчики (включая неявный счетчик list-item для элементов <ol> ) начинают с 0 и увеличиваются на единицу с каждым элементом, то есть первый элемент будет засчитан как 1. А что, если вы хотите считать в обратном порядке до 1?

Для этого добавьте атрибут reversed к элементу <ol> . Если вы используете стандартный стиль списка, маркеры будут работать как положено. Однако, если вы используете пользовательский счетчик, вам потребуется установить counter-increment на отрицательное значение и вручную рассчитать начальное значение счетчика.

Проверьте свое понимание