counter-increment » Новости мира Интернет
Яндекс Документы вывели из бета-тестирования и запустили официально с рядом новых функций - «Новости мира Интернет»
Яндекс Документы вывели из бета-тестирования и запустили официально с рядом новых функций - «Новости мира Интернет»
В Steam добавили кастомизацию библиотеки, улучшили оверлей и магазин - «Новости мира Интернет»
В Steam добавили кастомизацию библиотеки, улучшили оверлей и магазин - «Новости мира Интернет»
Modos разработали комплект для повышения частоты обновления дисплея на E-Ink до 75 Гц - «Новости мира Интернет»
Modos разработали комплект для повышения частоты обновления дисплея на E-Ink до 75 Гц - «Новости мира Интернет»
Сбер выпустил мини-устройство SberBoom Micro на базе ИИ GigaChat - «Новости мира Интернет»
Сбер выпустил мини-устройство SberBoom Micro на базе ИИ GigaChat - «Новости мира Интернет»
Доказано: Windows 11 может занимать на диске всего 2,8 Гбайт, если выкинуть всё лишнее - «Новости сети»
Доказано: Windows 11 может занимать на диске всего 2,8 Гбайт, если выкинуть всё лишнее - «Новости сети»
Intel воскресила легендарный шестиядерник Core i5-10400 под новым именем Core i5-110 - «Новости сети»
Intel воскресила легендарный шестиядерник Core i5-10400 под новым именем Core i5-110 - «Новости сети»
Отключения мобильного интернета сыграли на руку операторам сотовой связи, провайдерам и продавцам роутеров - «Новости сети»
Отключения мобильного интернета сыграли на руку операторам сотовой связи, провайдерам и продавцам роутеров - «Новости сети»
Утёкшие рендеры Samsung Galaxy S26 Pro подтверждают его сходство с Galaxy S25 - «Новости сети»
Утёкшие рендеры Samsung Galaxy S26 Pro подтверждают его сходство с Galaxy S25 - «Новости сети»
Тест показал, что OLED-монитор «раздражает» выгоранием уже через 18 месяцев использования, но не всё так однозначно - «Новости сети»
Тест показал, что OLED-монитор «раздражает» выгоранием уже через 18 месяцев использования, но не всё так однозначно - «Новости сети»
Google добавила в Gemini поддержку аудиофайлов - «Новости мира Интернет»
Google добавила в Gemini поддержку аудиофайлов - «Новости мира Интернет»
Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 2.0+ 9.2+ 3.0+ 1.0+ 2.1+ 2.0+

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.

Синтаксис

counter-increment: none | inherit | идентификатор | целое число

Значения

none
Запрещает увеличение счетчика для текущего селектора.
inherit
Наследует значение родителя.
идентификатор

Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом.
целое число
Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения.

Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл..;1.

Табл. 1. Изменение нумерации списка
Код Результат
LI { list-style-type: none;
OL { counter-reset: list -1;
LI:before {
counter-increment: list;
content: counter(list) ". ";

Список начинается с нуля.

0, 1, 2

LI { list-style-type: none;
OL { counter-reset: list;
LI:before {
counter-increment: list 2;
content: counter(list) ". ";

Выводятся все четные числа.

2, 4, 6

LI { list-style-type: none;
OL { counter-reset: list -1;
LI:before {
counter-increment: list list;
content: counter(list) ". ";

Выводятся все нечетные числа.

1, 3, 5

LI { list-style-type: none;
OL { counter-reset: list 9;
LI:before {
counter-increment: list;
content: counter(list) ". ";

Список начинается с 10.

10, 11, 12

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>counter-increment</title>
  <style>
   body {
    counter-reset: heading; /* Инициируем счетчик */
   
   h2:before {
    counter-increment: heading; /* Указываем идентификатор счетчика */
    content: "Глава " counter(heading) ". "; /* Выводим текст перед содержимым тега <h2> */
   
  </style>
 </head>
 <body>
  <h2>Теория ловли льва в пустыне</h2>
  <h2>Методы инверсной кинематики</h2>
  <h2>Ловля льва численными методами</h2>
 </body>
</html>

Результат данного примера показан на рис. 1.

.;


Рис. 1. Применение свойства counter-increment

Примечание

Для элементов, у которых установлено display:.;none, значение счётчика не меняется.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Internet Explorer Chrome Opera Safari Firefox Android iOS 8.0 2.0 9.2 3.0 1.0 2.1 2.0 Краткая информация Значение по умолчанию none Наследуется Нет Применяется Ко всем элементам Ссылка на спецификацию Версии CSS CSS 1 CSS 2 CSS 2.1 CSS 3 Описание Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили. Синтаксис counter-increment: none | inherit | идентификатор | целое число Значения none Запрещает увеличение счетчика для текущего селектора. inherit Наследует значение родителя. идентификатор Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом. целое число Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения. Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл;1. Табл. 1. Изменение нумерации списка Код Результат LI _

Смотрите также

А что там на главной? )))



Комментарии )))