CSS Лічильники
Піца
Гамбургер
Хотдоги
CSS лічильники - це "змінні", що підтримуються CSS, значення яких можна збільшувати за допомогою правил CSS (щоб відстежувати, скільки разів вони використовуються). Лічильники дозволяють налаштувати зовнішній вигляд контенту в залежності від його розміщення в документі.
Автоматична нумерація за допомогою лічильників
CSS лічильники схожі на "змінні". Значення змінних можуть бути збільшені за допомогою правил CSS (які будуть відстежувати, скільки разів вони використовуються).
Для роботи з лічильниками CSS ми будемо використовувати наступні властивості:
counter-reset- створює або скидує лічильникcounter-increment- збільшує значення лічильникаcontent- вставляє згенерований контентcounter()абоcounters()функція - додає значення лічильника до елемента
Щоб використовувати лічильник CSS, його необхідно спочатку створити за допомогою counter-reset.
В наступному прикладі створюється лічильник для сторінки (в селекторі body), потім збільшується значення лічильника для кожного елемента <h2> і додається "Section <значення лічильника>:" на початок кожного елемента <h2>:
Приклад
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Спробуйте самі »
Вкладені лічильники
В наступному прикладі створюється один лічильник для сторінки (section) та один лічильник для кожного елемента <h1> (subsection). Лічильник "section" буде підраховуватись для кожного елемента <h1> за допомогою "Section <значення лічильника section>.", а лічильник "subsection" буде підраховуватись для кожного елемента <h2> за допомогою "<значення лічильника section>.<значення лічильника subsection>":
Приклад
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) " ";
}
Спробуйте самі »
Лічильник також може бути корисним для складання списків, оскільки в дочірніх елементах автоматично створюється новий екземпляр лічильника. Тут ми використовуємо функцію counters() для вставки рядка між різними рівнями вкладених лічильників:
Приклад
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Спробуйте самі »
Властивості CSS лічильника
| Властивість | Опис |
|---|---|
| content | Використовується із псевдоелементами ::before та ::after для вставки згенерованого контента |
| counter-increment | Збільшує одне або кілька значень лічильника |
| counter-reset | Створює або скидає один або кілька лічильників |
