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

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

У каждого уровня нумерации может быть собственный счётчик. Ниже страница получает один счётчик (с именем «section»), а каждый элемент <h1> — другой (с именем «subsection»).

Пример

Создайте страницу со счётчиками CSS, использующую два счётчика: один с именем "section", сбрасываемый на body, и один с именем "subsection", сбрасываемый на каждом h1. Используйте псевдоэлементы ::before, чтобы добавлять "Section X." перед заголовками h1 и "X.Y" перед заголовками h2. Включите несколько элементов h1 и h2, чтобы продемонстрировать нумерацию.

> Результат: полная HTML-страница

Prompt

Создайте страницу со счётчиками CSS, использующую два счётчика: один с именем "section", сбрасываемый на body, и один с именем "subsection", сбрасываемый на каждом h1. Используйте псевдоэлементы ::before, чтобы добавлять "Section X." перед заголовками h1 и "X.Y" перед заголовками h2. Включите несколько элементов h1 и h2, чтобы продемонстрировать нумерацию.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Two Counters</title>
<style>
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>

<h1>HTML Tutorial</h1>
<h2>HTML Introduction</h2>
<h2>HTML Editors</h2>
<h2>HTML Basic</h2>

<h1>CSS Tutorial</h1>
<h2>CSS Introduction</h2>
<h2>CSS Syntax</h2>
<h2>CSS Selectors</h2>

<h1>JavaScript Tutorial</h1>
<h2>JavaScript Introduction</h2>
<h2>JavaScript Variables</h2>

</body>
</html>

Функция CSS counters()

Вложенные счётчики с одним именем можно прочитать за один раз: функция counters() возвращает их текущие значения в виде строки.

Эта же функция позволяет вставить строку между разными уровнями.

Пример

Создайте страницу с вложенными нумерованными списками, где list-style-type установлен в none. Используйте CSS-счётчик с именем "section", который сбрасывается на каждом ol, увеличивается на каждом li и использует функцию counters() с разделителем "." в content для li::before, чтобы отображать вложенную нумерацию вида "1", "1.1", "1.1.1".

> Результат: полная HTML-страница

Prompt

Создайте страницу с вложенными нумерованными списками, где list-style-type установлен в none. Используйте CSS-счётчик с именем "section", который сбрасывается на каждом ol, увеличивается на каждом li и использует функцию counters() с разделителем "." в content для li::before, чтобы отображать вложенную нумерацию вида "1", "1.1", "1.1.1".

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS counters() Function</title>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
</style>
</head>
<body>

<ol>
  <li>Item
    <ol>
      <li>Item
        <ol>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
        </ol>
      </li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
  <li>Item
    <ol>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
  <li>Item</li>
</ol>

</body>
</html>

Свойства счётчика CSS

Эти свойства и функции CSS работают со счётчиками:

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