آموزش شمارنده ها(Counters) در CSS

 شمارنده ها(counters) در CSS متغیرهایی هستند که توسط CSS نگهداری می شوند که مقادیر آنها می تواند توسط قواعد CSS افزایش یابد( تا تعداد دفعات استفاده از آنها پیگری شود). شمارنده ها به ما امکان می دهند تا ظاهر محتوا را بر اساس قرار گیری آنها در سند، تنظیم کنیم.

شماره گذاری خودکار با Counters (شمارنده ها)

شمارنده ها در CSS، مانند متغیرها هستند. مقدار این متغیرها می تواند توسط قواعد CSS افزایش یابد(که می توانیم پیگیری کنیم که از آنها چند بار استفاده شده است). برای کار با شمارنده های CSS، می توانیم از ویژگی های زیر استفاده کنیم:

ویژگی counter-reset: یک شمارنده را ایجاد یا ریست می کند.

ویژگی counter-increment : مقدار یک شمارنده را افزایش می دهد.

ویژگی content : محتوای تولید شده را اضافه می کند.

تابع counter() یا counters() : مقدار شمارنده را در یک عنصر اضافه می کند.

برای استفاده از یک شمارنده ی CSS، این شمارنده ابتدا باید با ویژگی counter-reset ایجاد شود.

در مثال زیر، یک شمارنده(counter) برای صفحه(در سلکتور body) ایجاد شده است؛ سپس برای هر عنصر <h2> شمارنده را افزایش داده و عبارت "Section" <value of the counter>": " را در ابتدای هر عنصر <h2> قرار داده است:

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

شمارنده های تو در تو(Nesting)

در مثال زیر، یک شمارنده برای صفحه(section) و یک شمارنده هم برای هر عنصر <h1> به نام subsection ایجاد کرده ایم. پس شمارنده ی section برای عناصر <h1> است. و شمارنده ی subsection برای عناصر <h2> است.

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) " ";
}

 یک شمارنده همچنین می تواند برای ایجا لیست های outline شده مفید باشد، زیرا یک نمونه ی جدید از یک شمارنده، به طور اتوماتیک در عناصر فرزند ایجاد می شود. در زیر، ما از تابع counters() برای درج کردن یک رشته بین سطوح مختلف شمارنده های تو درتو استفاده می کنیم.

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

 ویژگی های شمارنده ها در CSS