counters() в CSS — вкладена нумерація у властивості content
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте унікальні імена лічильників для відображення різних значень в різних контекстах.
автор: Bond - Порада
-
Експериментуйте з різними стилями форматування, щоб створювати власний вигляд лічильників.
автор: Bond - Порада
-
Для використання функції
автор: Bondcounters()потрібно встановити значення лічильника за допомогою властивостіcounter-resetабо змінити значення лічильника засобами CSS-селекторів та псевдокласів. - Порада
-
Значення лічильника можуть бути змінними або фіксованими числами, залежно від використання
автор: Bondcounter-resetта CSS-селекторів. - Нотатка
-
Використання функції
автор: Bondcounters()дозволяє вам створювати ієрархічну нумерацію елементів з урахуванням їхньої вкладеності. Ви можете використовувати цю функцію для створення складних нумераційних схем, таких як нумерація розділів і підрозділів, списків з підпунктами тощо.
Синтаксис
counters(<name>, <style>, <counter-reset>);Функція counters може отримувати 3 значень:
-
<name> -
Рядок або комбінація рядків, що представляють ім'я лічильника або лічильників, розділених комами.
автор: Bond -
<style> -
Рядок, що представляє стиль форматування лічильника. Деякі приклади:
автор: Bonddecimal,lower-roman,upper-alphaі т.д. -
<counter-reset> -
Число або ідентифікатор лічильника, що встановлює початкове значення лічильника.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1.5 | 3 | 10 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Використання функції counters() для створення списків.
HTML
<div id="description">
<h2>Приклад з функцією counters()</h2>
<p>Використання функції counters() для створення списків.</p>
</div>
<div id="result">
<ol>
<li>Елемент 1</li>
<li>Елемент 2</li>
<li>Елемент 3</li>
</ol>
</div>CSS
#description {
font-style: italic;
text-align: left;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
ol {
list-style: none;
counter-reset: my-counter;
}
li:before {
content: counters(my-counter, ".") ". ";
counter-increment: my-counter;
}
li:hover:before {
content: counters(my-counter, ".") ". ";
}Використання функції counters() для створення списків.
HTML
<div id="description">
<h2>Приклад з функцією counters()</h2>
<p>Використання функції counters() для створення списків.</p>
</div>
<div id="result">
<ol>
<li>Елемент 1</li>
<li class="custom-counter">Елемент 2</li>
</ol>
</div>CSS
#description {
font-style: italic;
text-align: left;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
ol {
list-style: none;
}
li:before {
content: counters(custom-counter, ".") ". ";
counter-reset: custom-counter;
}
.custom-counter:before {
counter-increment: custom-counter;
content: counters(custom-counter, ".") ". ";
}Чотири однакові вкладені списки з різним налаштуванням лічильника. Перший — counter-reset лише на корені: нумерація плоска, 1..5, попри вкладеність. Другий — скидання на кожному вкладеному списку: з'являється справжня ієрархія. Третій показує фантомний рівень «0.» від зайвого скидання на обгортці. Четвертий не має жодного counter-reset і користується вбудованим лічильником list-item.
HTML
<div class="cols">
<section class="flat">
<h4>counter-reset лише на корені — плоско</h4>
<ol>
<li>Розділ
<ol>
<li>Підрозділ</li>
<li>Підрозділ
<ol><li>Пункт</li></ol>
</li>
</ol>
</li>
<li>Розділ</li>
</ol>
</section>
<section class="nested">
<h4>counter-reset на кожному ol — ієрархія</h4>
<ol>
<li>Розділ
<ol>
<li>Підрозділ</li>
<li>Підрозділ
<ol><li>Пункт</li></ol>
</li>
</ol>
</li>
<li>Розділ</li>
</ol>
</section>
<section class="ghost">
<h4>зайве скидання на обгортці — фантомний «0.»</h4>
<ol>
<li>Розділ
<ol>
<li>Підрозділ</li>
<li>Підрозділ
<ol><li>Пункт</li></ol>
</li>
</ol>
</li>
<li>Розділ</li>
</ol>
</section>
<section class="builtin">
<h4>counters(list-item, ".") — без жодних налаштувань</h4>
<ol>
<li>Розділ
<ol>
<li>Підрозділ</li>
<li>Підрозділ
<ol><li>Пункт</li></ol>
</li>
</ol>
</li>
<li>Розділ</li>
</ol>
</section>
</div>
<p class="head">Третій аргумент задає стиль одразу всім рівням:</p>
<div class="cols">
<section class="roman">
<h4>counters(sd, ".", upper-roman)</h4>
<ol><li>Розділ<ol><li>Підрозділ</li><li>Підрозділ</li></ol></li><li>Розділ</li></ol>
</section>
<section class="glued">
<h4>порожній роздільник ""</h4>
<ol><li>Розділ<ol><li>Підрозділ</li><li>Підрозділ</li></ol></li><li>Розділ</li></ol>
</section>
<section class="single">
<h4>counter(sf) — лише найглибший рівень</h4>
<ol><li>Розділ<ol><li>Підрозділ</li><li>Підрозділ</li></ol></li><li>Розділ</li></ol>
</section>
<section class="broken">
<h4>counters(sg) без роздільника — порожньо</h4>
<ol><li>Розділ<ol><li>Підрозділ</li><li>Підрозділ</li></ol></li><li>Розділ</li></ol>
</section>
</div>CSS
.head {
margin: 22px 0 8px;
color: #5a6472;
font-size: .9em;
}
.cols {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
section {
width: 260px;
}
h4 {
margin: 0 0 6px;
color: #5a6472;
font: 600 12px/1.35 ui-monospace, monospace;
}
ol {
margin: 0;
padding-left: 22px;
list-style: none;
}
li {
padding: 1px 0;
}
li::before {
color: #2f6fd0;
font-weight: 700;
}
/* Кожна секція веде СВІЙ лічильник: інакше примірник із сусідньої
секції лишається в області видимості й додає зайвий рівень. */
.flat {
counter-reset: sa;
}
.flat li {
counter-increment: sa;
}
.flat li::before {
content: counters(sa, ".") " ";
}
.nested ol {
counter-reset: sb;
}
.nested li {
counter-increment: sb;
}
.nested li::before {
content: counters(sb, ".") " ";
}
.ghost {
counter-reset: sc;
}
.ghost ol {
counter-reset: sc;
}
.ghost li {
counter-increment: sc;
}
.ghost li::before {
content: counters(sc, ".") " ";
color: #d64545;
}
.builtin li::before {
content: counters(list-item, ".") " ";
color: #3a9a4f;
}
.roman ol { counter-reset: sd; }
.roman li { counter-increment: sd; }
.roman li::before {
content: counters(sd, ".", upper-roman) " ";
}
.glued ol { counter-reset: se; }
.glued li { counter-increment: se; }
.glued li::before {
content: counters(se, "") " ";
}
.single ol { counter-reset: sf; }
.single li { counter-increment: sf; }
.single li::before {
content: counter(sf) " ";
}
.broken ol { counter-reset: sg; }
.broken li { counter-increment: sg; }
.broken li::before {
content: counters(sg) " ";
}
.broken h4 {
color: #d64545;
}Коментарі
Коментарів ще немає — будьте першим!