CSS Counters

شمارنده‌های CSS (CSS Counters) چیست؟

شمارنده‌های CSS روشی برای شمردن تعداد دفعات تکرار یک عنصر در صفحه هستند، معمولاً برای شماره‌گذاری لیست‌ها، سرفصل‌ها یا بخش‌ها استفاده می‌شوند. این قابلیت به شما اجازه می‌دهد بدون نیاز به استفاده از HTML مثل `<ol>` یا جاوااسکریپت، شماره‌گذاری خودکار انجام دهید.

—

### چگونه کار می‌کنند؟

1. **تعریف و راه‌اندازی شمارنده** با `counter-reset`.
2. **افزایش مقدار شمارنده** با `counter-increment`.
3. **نمایش مقدار شمارنده** با استفاده از ویژگی `content` در شبه‌عنصرهای `::before` یا `::after`.

—

### مثال ساده

“`css
body {
      counter-reset: section; /* شمارنده با نام section را صفر می‌کند */
}

h2 {
     counter-increment: section; /* هر بار که h2 ظاهر می‌شود، مقدار section یک واحد افزایش می‌یابد */
}

h2::before {
content: “بخش ” counter(section) “: “; /* نمایش شماره بخش */
      font-weight: bold;
}
“`

توضیح:

* شمارنده `section` روی body صفر شده.
* هر عنصر `h2` شمارنده section را ۱ واحد افزایش می‌دهد.
* با استفاده از `::before` شماره بخش قبل از متن `h2` نمایش داده می‌شود.

—

 مثال شماره‌گذاری تو در تو (مثل 1.1، 1.2، 2.1 و …)

“`css
body {
    counter-reset: chapter; /* شمارنده chapter را صفر می‌کند */
}

h1 {
    counter-reset: section; /* شمارنده section را برای هر فصل صفر می‌کند */
    counter-increment: chapter; /* هر بار h1 ظاهر می‌شود، مقدار chapter یک واحد افزایش می‌یابد */
}

h1::before {
content: “فصل ” counter(chapter) “: “;
}

h2 {
     counter-increment: section;
}

h2::before {
content: counter(chapter) “.” counter(section) ” “;
}
“`

—

 نکات مهم:

* نام شمارنده‌ها را می‌توانید هر چیزی انتخاب کنید.
* می‌توانید چند شمارنده را همزمان صفر کنید، مثل: `counter-reset: chapter section;`
* می‌توانید چند شمارنده را همزمان افزایش دهید.
* شمارنده‌ها می‌توانند تو در تو باشند.
* تابع `counter()` برای نمایش یک شمارنده است.
* تابع `counters()` (جمع) برای نمایش چند شمارنده با جداکننده است، مثلا:
`content: counters(section, “.”) ” “;` که خروجی‌ای مثل “1.2.3” می‌دهد.