Счётчики CSS
Заголовки, разделы и элементы списка можно нумеровать автоматически с помощью счётчиков CSS, без всяких скриптов.
Считайте счётчик переменной, которую поддерживает CSS и значение которой можно увеличивать или уменьшать с помощью правил.
Автоматическая нумерация CSS со счётчиками
Поскольку счётчики ведут себя как переменные, правила CSS могут изменять их значения.
Вот свойства, которые для этого используются:
counter-reset- Создаёт счётчик или сбрасывает егоcounter-increment- Увеличивает или уменьшает значение счётчикаcontent- Вставляет сгенерированный контентcounter()- Помещает значение счётчика в элемент
Счётчик не существует, пока его не создаст counter-reset, поэтому этот шаг всегда идёт первым.
Увеличение и уменьшение счётчика CSS
В этом примере селектор body создаёт счётчик для всей страницы, а затем каждый элемент <h2> увеличивает его значение на 1.
Пример
Prompt
Создайте страницу, использующую счётчики CSS для автоматической нумерации заголовков h2. Используйте counter-reset на body, чтобы создать счётчик с именем "section", затем используйте counter-increment и content на h2::before, чтобы отображать "Section X: " перед каждым заголовком. Включите три элемента h2 с небольшим текстом абзаца.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counter Increment</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<p>This tutorial covers the basics of HTML.</p>
<h2>CSS Tutorial</h2>
<p>This tutorial covers the basics of CSS.</p>
<h2>JavaScript Tutorial</h2>
<p>This tutorial covers the basics of JavaScript.</p>
</body>
</html>
Уменьшение счётчика
Второй параметр counter-increment задаёт шаг, который по умолчанию равен 1. Если указать -1, значение счётчика уменьшается.
Пример
Prompt
Создайте страницу, использующую счётчики CSS с уменьшающимся значением. Используйте counter-reset на body, чтобы создать счётчик с именем "section", затем используйте counter-increment со значением -1 на h2::before, чтобы уменьшать счётчик. Отображайте "Section X: " перед каждым заголовком с помощью свойства content. Включите три элемента h2 с текстом абзаца.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counter Decrement</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section -1;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Decrementing a CSS Counter</h1>
<h2>HTML Tutorial</h2>
<p>This tutorial covers the basics of HTML.</p>
<h2>CSS Tutorial</h2>
<p>This tutorial covers the basics of CSS.</p>
<h2>JavaScript Tutorial</h2>
<p>This tutorial covers the basics of JavaScript.</p>
</body>
</html>
Увеличение на пользовательские значения
В качестве шага подходит любое значение. В примере ниже счётчик увеличивается на 2.
Пример
Prompt
Создайте страницу, использующую счётчики CSS с шагом увеличения 2. Используйте counter-reset на body, чтобы создать счётчик с именем "section", затем используйте counter-increment со значением 2 на h2::before, чтобы увеличивать счётчик на 2 каждый раз. Отображайте "Section X: " перед каждым заголовком с помощью свойства content. Включите три элемента h2 с текстом абзаца.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counter Custom Increment</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section 2;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Incrementing by Custom Values</h1>
<h2>HTML Tutorial</h2>
<p>This tutorial covers the basics of HTML.</p>
<h2>CSS Tutorial</h2>
<p>This tutorial covers the basics of CSS.</p>
<h2>JavaScript Tutorial</h2>
<p>This tutorial covers the basics of JavaScript.</p>
</body>
</html>