counter-reset в CSS


counter-reset

Свойство CSS counter-reset используется для создания счетчика, указания его начального значения и сброса счетчика в это значение, если HTML-элемент, для которого применялось свойство, повторно появляется на странице. Изменение значения счетчика осуществляется с помощью counter-increment, а способ нумерации задается свойством content.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства counter-reset являются следующие величины:

  • Идентификатор(ы) — одно или несколько (через пробел) имен созданных счетчиков. Именем может быть любое слово, включающее латинские буквы (a-z, A-Z), цифры (0-9), знаки подчеркивания (_) и дефисы (-). Но оно не может начинаться с цифры или дефиса, за которым идет цифра.
  • Число — целое число, присваивающее начальное значение счетчику. Пишется через пробел после каждого идентификатора, если не указано, то значение равно единице (1). Допускаются отрицательные величины.
  • none — запрет на создание счетчика для селектора, к которому применяется свойство counter-reset .
  • inherit — наследует значение counter-reset от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: none.

Синтаксис

Пример CSS: использование counter-reset

В этом примере счетчик заголовков (zag2) был объявлен для тега . Это сделано для того, чтобы в пределах всей страницы счетчик не сбрасывался в начальное положение, а только увеличивался. По той же причине счетчик параграфов (parag) указан для тега

Результат. Использование свойства CSS counter-reset.

counter-reset

Поддержка браузерами

12.0+ 8.0+ 2.0+ 4.0+ 9.6+ 3.1+

Описание

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

Изменение значения счетчика осуществляется с помощью свойства counter-increment, а способ нумерации (тип маркера) и вывод счётчика осуществляется свойством content.

Свойство counter-reset используется совместно со свойствами counter-increment и content.

counter-reset

Браузер Internet Эксплорер Нетscape Опера Safari Файер фох
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да
Илон Маск рекомендует:  quotes в CSS

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

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/generate.ШТМЛ#propdef-counter-reset

Описание

Устанавливает идентификатор, в котором будет храниться счетчик отображений определенного элемента, а также начальное значение счетчика. Такой счетчик может выводиться с помощью свойства content и псевдоэлементов after и before .

Синтаксис

counter-reset: none | [идентификатор] | [целое число]

Аргументы

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

целое число Начальное значение каждого идентификатора. По умолчанию равно 0.

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0


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

Рис. 1. Применение параметра counter-reset

Примечание

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

CSS свойство counter-reset

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

CSS синтаксис

Возможные значения

Значение Описание
none Значение по умолчанию. Запрещает создание или сброс счетчика.
идентификатор Определяет одну или несколько переменных, в которых будет храниться значение счетчика. Переменные разделяются пробелом.
целое число Определяет начальное значение счетчика. По умолчанию равно 0.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Способ пронумировать главы и подглавы в виде «Глава 1», «1.1», «1.2» и т.д.

СSS Свойство counter-reset

Пример

Создать счетчик («my-sec-counter») и увеличить его на единицу для каждого вхождения селектора

body <
/* установка «my-sec-counter» с 0 */
counter-reset: my-sec-counter;
>

h2::before <
/* увеличение «my-sec-counter» на 1 */
counter-increment: my-sec-counter;
content: «Section » counter(my-sec-counter) «. «;
>

Определение и использование

Свойство counter-reset создает или сбрасывает один или несколько счетчиков CSS.

Свойство counter-reset обычно используется вместе с counter-increment и content.

Значение по умолчанию: none
Унаследованный: нет
Анимируемый: нет. Прочитать о animatable
Версия: CSS2
JavaScript синтаксис: object.style.counterReset=»section» Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
counter-reset 4.0 8.0 2.0 3.1 9.6

CSS Синтаксис

Значения свойств

Значение Описание
none Значение по умолчанию. Никакие счетчики не будут сброшены
id number Идентификатор id определяет, какой счетчик следует сбросить. Число задает значение, на которое сбрасывается счетчик при каждом вхождении селектора. Значение по умолчанию number равно 0
initial Устанавливает для этого свойства значение по умолчанию. Прочитать о initial
inherit Наследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Создать счетчик («my-sec-counter») и увеличить его на единицу для каждого вхождения селектора

body <
/* установка «my-sec-counter» с 0 */
counter-reset: my-sec-counter;
>

h2::before <
/* уменьшение «my-sec-counter» на 1 */
counter-increment: my-sec-counter -1;
content: «Section » counter(my-sec-counter) «. «;
>

Пример


Нумерация разделов и подразделов с «Section 1:», «1.1», «1.2», и т.д.:

body <
/* установка «section» с 0 */
counter-reset: section;
>

h1 <
/* установка «subsection» с 0 */
counter-reset: subsection;
>

h1::before <
/* увеличение «section» на 1 */
counter-increment: section;
content: «Section » counter(section) «: «;
>

h2::before <
/* увеличение «subsection» на 1 */
counter-increment: subsection;
content: counter(section) «.» counter(subsection) » «;
>

Пример

Создайте счетчик и увеличьте его на единицу (используя римские цифры) для каждого вхождения селектора

body <
/* установка «my-sec-counter» на 0 */
counter-reset: my-sec-counter;
>

h2::before <
/* увеличение «my-sec-counter» by 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) «. «;
>

Связанные страницы

CSS Справочник: Псевдо элемент ::before псевдо элемент

CSS Справочник: Псевдо элемент ::after псевдо элемент

counter-reset

Поддержка браузеров

IE Opera Chrome Firefox Safari
8.0+ + + + 3.1+

Пример

Способ нумерации секций с помощью «Секция 1», «1.1», «1.2», и т.д.:

Описание и использование

Свойство CSS counter-reset создает или сбрасывает один или несколько счетчиков.

Counter-reset обычно используется вместе с counter-increment и content property.

counter-reset

Easily manage projects with monday.com

The counter-reset property allows for automatic numbering of elements. Like an ordered list (

    ), but it works on any element. It is particularly useful in creating a table of contents or numbering headings for something like a thesis paper. The counters are applied via the content property. A simple example:

The counter-reset property is used to reset a CSS counter to a given value.

It is part of the CSS counter module which is part of the generated content, automatic numbering, and lists CSS2.1 specification, extended in Generated and Replaced Content Module CSS3 specification.

Syntax

  • is the name of the counter you want to reset
  • is the value to reset the counter to
  • none disable the counter

Note: the default value for the integer is 0. If no integer is set after the counter name, it will be reseted to 0. Thus, this works as expected:

You can reset several counters at once with a space-separated list, each one with its specific value if you wish so.

This will reset my-awesome-counter to 5 and my-other-counter to the default value: 0.

You can see this list as: counter1 value1 counter2 value2 counter3 value3 . . If a value is omitted, it’s 0.


In the following demo, article resets section counter to its default value (0), which is then incremented at each section occurrence, then displayed in front of section headings.

CSS счетчики

На этой странице

CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1 (ссылка на спецификацию).

Значение счетчика сбрасывается (инициализируется) при помощи counter-reset .

counter-increment может быть отображен на странице, используя функцию counter() или counters() в свойстве content .

Использование счетчиков

Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счетчика — используйте функцию counter(). Следующий пример прибавляет в начале каждого h3 элемента «Section :».

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

CSS счетчики могут быть очень полезны для создания нумерованых списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:

CSS Свойство counter-reset

Пример

Пронумеровать разделы и подразделы документа следующим образом «Раздел 1», «1.1», «1.2», и т.д.:

body
<
counter-reset:section;
>

h1:before
<
counter-increment:section;
content:»Раздел » counter(section) «. «;
>

h2:before
<
counter-increment:subsection;
content:counter(section) «.» counter(subsection) » «;
>

Попробуйте сами »

Определение и Использование

Свойство counter-reset создает или сбрасывает один или более счетчиков.

Свойство counter-reset обычно используется вместе со свойствами counter-increment и content.

Значение по умолчанию: none
Наследуется: нет
Версия: CSS2
JavaScript синтаксис: объект.style.counterReset=»subsection»

Поддержка Браузерами

Свойство counter-reset поддерживается всеми основными браузерами.

Замечание: IE8 поддерживает свойство counter-reset, только если указано объявление !DOCTYPE.

Свойство CSS counter-reset

h1:before
<
content:»Section » counter(section) «. «;
counter-increment:section;
>

h2:before
<
counter-increment:subsection;
content:counter(section) «.» counter(subsection) » «;
>

Описание и использование

Свойство CSS counter-reset создает или сбрасывает один или несколько счетчиков отображения определенного элемента.

Свойство counter-reset обычно используется вместе со свойствами counter-increment и content.

Значение по умолчанию нет
Наследование нет
Версия CSS CSS 2
Синтаксис JavaScript object.style.counterReset=»subsection»

Поддержка в браузерах

Свойство counter-reset поддерживается всеми основными браузерами.

Заметка: Internet Explorer 8 (и выше) правильно поддерживают свойство caption-side только если указан DOCTYPE.

Илон Маск рекомендует:  Iis выбор средства разработки
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL