CSS counter() — значення лічильника у content
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте
автор: Bondcounter()разом з псевдокласамиcounter-resetта псевдоелементами::beforeабо::after, щоб створювати лічильники. - Порада
-
Зверніть увагу на правильне форматування та стиль лічильника, щоб відповідати вашим потребам дизайну.
автор: Bond - Нотатка
-
Значення за замовчуванням (
автор: Bondfallback) використовується, якщо лічильник не визначено, тому обережно встановлюйте його, щоб забезпечити правильне відображення, якщо лічильник не існує. - Нотатка
-
Зверніть увагу, що функція
автор: Bondcounter()має багато варіантів використання та комбінацій з іншими CSS властивостями, такими якlist-styleтаcontent.
Синтаксис
counter(name, style, fallback);Функція counter може отримувати 3 значень:
-
<name> -
Рядок, що представляє ім'я лічильника.
автор: Bond -
<style> -
Рядок, що визначає стиль форматування лічильника (наприклад,
автор: Bonddecimal,lower-alpha,upper-romanтощо). -
<fallback> -
Рядок або число, яке використовується як значення лічильника, якщо лічильник не визначено.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 9.2 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі, окремий елемент списку буде виділено відмінним кольором, використовуючи лічильник.
HTML
<div id="description">
<h2>Приклад 2: використання лічильника для виділення окремих елементів списку</h2>
<p>У цьому прикладі, окремий елемент списку буде виділено відмінним кольором, використовуючи лічильник.</p>
</div>
<div id="result">
<ol class="counter-list">
<li>Перший елемент</li>
<li class="highlighted">Другий елемент</li>
<li>Третій елемент</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;
}
.counter-list {
counter-reset: my-counter;
}
.counter-list .highlighted::before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: yellow;
color: black;
padding: 2px 6px;
border-radius: 4px;
}У цьому прикладі, кожен пункт списку має власне унікальне значення лічильника. За допомогою селекторів nth-child, ми можемо встановити початкове значення лічильника для кожного пункту. Перший пункт списку має значення лічильника 1 (за замовчуванням), другий пункт має значення 5, а третій пункт має значення 10.
HTML
<div id="description">
<h2>Приклад 1: різні значення лічильника для кожного пункту списку</h2>
<p>Кожен пункт списку має власне унікальне значення лічильника.</p>
</div>
<div id="result">
<ol class="counter-list">
<li>Перший елемент</li>
<li>Другий елемент</li>
<li>Третій елемент</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;
}
.counter-list {
counter-reset: my-counter;
}
.counter-list li::before {
content: counter(my-counter);
counter-increment: my-counter;
padding-right: 5px;
color: #ff0000;
font-weight: 700;
}
.counter-list li:nth-child(2)::before {
counter-reset: my-counter 5; /* Початкове значення лічильника для другого пункту списку */
}
.counter-list li:nth-child(3)::before {
counter-reset: my-counter 10; /* Початкове значення лічильника для третього пункту списку */
}Два однакові вкладені списки з вимкненими маркерами. Лівий нумерує через counter(item) — вкладений рівень починає рахунок заново. Правий через counters(item, ".") — номер збирається з усіх рівнів і дає 1.1, 1.2, 2.1.
HTML
<div id="description">
<h2>counter() і counters(): у чому різниця</h2>
<p>Розмітка в обох колонках однакова. Відрізняється лише функція у властивості content.</p>
</div>
<div id="result">
<div class="col one">
<h3>counter(item)</h3>
<ol>
<li>Розділ
<ol>
<li>Підрозділ</li>
<li>Підрозділ</li>
</ol>
</li>
<li>Розділ
<ol>
<li>Підрозділ</li>
</ol>
</li>
</ol>
</div>
<div class="col many">
<h3>counters(item, ".")</h3>
<ol>
<li>Розділ
<ol>
<li>Підрозділ</li>
<li>Підрозділ</li>
</ol>
</li>
<li>Розділ
<ol>
<li>Підрозділ</li>
</ol>
</li>
</ol>
</div>
</div>CSS
#result {
display: flex;
flex-wrap: wrap;
gap: 28px;
font: 15px/1.7 system-ui, sans-serif;
}
h3 {
margin: 0 0 6px;
font-size: 14px;
color: #495057;
}
.col {
min-width: 200px;
}
/* Скидання — на списку (батькові), збільшення — на пункті */
ol {
list-style: none;
margin: 0;
padding-left: 22px;
counter-reset: item;
}
li {
counter-increment: item;
}
.one li::before {
content: counter(item) ". ";
font-weight: bold;
color: #1864ab;
}
.many li::before {
content: counters(item, ".") ". ";
font-weight: bold;
color: #2f9e44;
}Коментарі
Коментарів ще немає — будьте першим!