Кратко
Секция статьи "Кратко"С помощью свойства counter
можно указать конкретное числовое значение определённому счётчику.
Пример
Секция статьи "Пример"Устанавливает числовое значение 25 для счётчика example
на элементе li
.
li { counter-set: example 25;}
li { counter-set: example 25; }
Например, нам нужно изменить порядок нумерации глав в оглавлении, чтобы после 3 главы шла сразу 9:
<section class="table-of-contents"> <h1 class="title">Оглавление</h1> <h2 class="chapter">HTML и CSS</h2> <h2 class="chapter">Создание стилей и таблиц стилей</h2> <h2 class="chapter">Селекторы: выбор форматируемых элементов</h2> <h2 class="chapter change-value">Механизм наследования стилей</h2> <h2 class="chapter">Управление сложной структурой стилей: каскад</h2> <h2 class="chapter">Поля, отступы, границы</h2></section>
<section class="table-of-contents"> <h1 class="title">Оглавление</h1> <h2 class="chapter">HTML и CSS</h2> <h2 class="chapter">Создание стилей и таблиц стилей</h2> <h2 class="chapter">Селекторы: выбор форматируемых элементов</h2> <h2 class="chapter change-value">Механизм наследования стилей</h2> <h2 class="chapter">Управление сложной структурой стилей: каскад</h2> <h2 class="chapter">Поля, отступы, границы</h2> </section>
Устанавливаем счётчик на элемент section
:
.table-of-contents { counter-reset: chapter;}
.table-of-contents { counter-reset: chapter; }
Устанавливаем увеличение значения счётчика сhapter
и устанавливаем конкретное числовое значение. Подставляем значение счётчика chapter
через функцию counter
:
.chapter { counter-increment: chapter;}.change-value { counter-set: chapter 9;}.chapter::before { content: "Глава "counter(chapter) ": ";}
.chapter { counter-increment: chapter; } .change-value { counter-set: chapter 9; } .chapter::before { content: "Глава "counter(chapter) ": "; }
Как понять
Секция статьи "Как понять"Свойство, которое может установить точное числовое значение на любой элемент со счётчиком.
Как пишется
Секция статьи "Как пишется"Чтобы добавить точное числовое значение счётчика на элементе, в значении свойства нужно указать имя счётчика и число.
По умолчанию начальное числовое значение 0, если не указано иное.
Значение счётчика example
на элементе li
равно 0:
li { counter-set: example;}
li { counter-set: example; }
Можно указать ключевое слово none
, чтобы не изменять числовое значение счётчика — это значение по умолчанию.
li { counter-set: none;}
li { counter-set: none; }
Аргументы
Секция статьи "Аргументы"Создавать новые счётчики может не только свойство counter
. Представим такую ситуацию, что вы применили на элемент только свойство counter
и указали в значении его свойства имя несуществующего счётчика (при этом на элементе нет унаследованного счётчика от: родительского элемента, одноуровневого предыдущего элемента).
li { counter-set: new 2;}
li { counter-set: new 2; }
В таком случае создастся новый счётчик на элементе li
с именем new
и начальным значением 0. После создания счётчика, свойство counter
начинает действовать как обычно.
Имена счётчиков чувствительны к регистру, например значения: example
и EXAMPLE
— это два разных, не связанных между собой счётчика.
Нельзя использовать ключевые слова: none
, initial
, inherit
, unset
, default
в качестве названий счётчиков.
В значении свойства можно указать 1 или более счётчиков. Указываются они по порядку через пробел.
li { counter-set: count1 -1 count2 99;}
li { counter-set: count1 -1 count2 99; }