شمارنده ها (Counters)
«شمارنده CSS» یعنی شماره گذاری خودکارِ عناصر بدون جاوااسکریپت. «شمارنده (Counter)» مثل متغیر ساده است. مقدارش را با قانون های CSS کم یا زیاد می کنیم. بنابراین تیترها یا آیتم ها، خودکار شماره می گیرند؛ مثل شماره صفحات دفتر.
شمارنده CSS چیست؟
شمارنده ها متغیرهای نگه داری شده در CSS هستند. با counter-reset می سازیم یا صفر می کنیم. سپس با counter-increment مقدار را تغییر می دهیم. در نهایت با content و شبه عنصرهای ::before یا ::after عدد را نمایش می دهیم.
شماره گذاری خودکار با counter-reset و counter-increment
در این نمونه، برای هر <h2> یک شماره «Section X:» در ابتدای تیتر می گذاریم.
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
کاهش یا افزایش گام شمارنده
می توانیم با پارامتر دوم در counter-increment مقدار را کم یا زیاد کنیم.
body {
counter-reset: section;
}
h2::before {
counter-increment: section -1;
content: "Section " counter(section) ": ";
}
body {
counter-reset: section;
}
h2::before {
counter-increment: section 2;
content: "Section " counter(section) ": ";
}
دو شمارنده تو در تو
این نمونه برای h1 شمارنده «section» و برای h2 شمارنده «subsection» می سازد. خروجی مثل «Section 1.» و «1.1» می شود.
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() برای شماره سلسله مراتبی
با تابع counters() می توانیم سطوح تودرتو را با جداکننده نمایش دهیم؛ مثل «1.2.3».
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
گام های عملی
- با
counter-resetشمارنده اصلی را بساز. - با
counter-incrementمقدار را تنظیم کن. - با
::beforeوcontentعدد را نمایش بده. - در صورت نیاز، شمارنده دوم تعریف کن.
- برای چند سطح، از
counters()استفاده کن.
نکته: برای هدف گیری دقیق تیترها یا آیتم ها، می توانی از انتخاب گرهای ویژگی کمک بگیری. برای استایل دهی نهایی فرم ها هم صفحه فرم ها را ببین.
جمع بندی سریع
- شمارنده های CSS، شماره گذاری خودکار می سازند.
counter-resetایجاد یا صفر می کند.counter-incrementمقدار را کم وزیاد می کند.contentعدد را روی صفحه می گذارد.counters()شماره چندسطحی می سازد.
برای مرور دوباره شمارنده های CSS همین صفحه را نشانه گذاری کن.