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

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

Так что же это за счетчики CSS? Мы можем рассматривать их как переменные, поддерживаемые CSS. Правила CSS могут увеличивать значения, которые будут отслеживать, сколько раз они используются.

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

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

Давайте установим счетчик в body и будем считать для каждого элемента p.

body {
  counter-reset: paragraph;
}

p::before {
  counter-increment: paragraph;
  content: 'Paragraph ' counter(paragraph) ': ';
}

Если мы теперь создадим следующий HTML:

<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>

В итоге мы получаем такой результат.

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

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

Пользовательский сброс

Давайте рассмотрим возможность сбросов.
Например, у нас есть элементы h2 в качестве основного счетчика, и для каждого абзаца, внутри него, мы хотим показать другой счетчик.
Для демонстрации мы даже объединим вывод счетчиков.

Рассмотрим следующую структуру HTML.

<h2>First heading</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2>Second heading</h2>
<p>Some text</p>
<p>Some text</p>

Затем мы можем легко создать индекс для каждого раздела следующим образом.

body {
  counter-reset: heading;
}
h2 {
  counter-reset: paragraph;
}
h2::before {
  counter-increment: heading;
  content: 'Section ' counter(heading) ': ';
}
p::before {
  counter-increment: paragraph;
  content: counter(heading) '.' counter(paragraph) ' ';
}

Что приведет к следующему:

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

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

Вы также можете ознакомиться с ними ниже.

See the Pen
Using CSS counters
by Chris Bongers (@rebelchris)
on CodePen.