شمارنده CSS

گوشت‌برگر

پیتزا

همبرگر

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

شمارنده به شما امکان می‌دهد که با توجه به موقعیت محتوای آن در مستند، ظاهر آن را تنظیم کنید.

شماره‌گذاری خودکار با شمارنده

شمارنده‌های CSS مانند "متغیرها" هستند. مقدار متغیرها می‌تواند از قوانین CSS افزایش یابد (برای پیگیری تعداد استفاده‌ها).

برای استفاده از شمارنده‌های CSS، ما از属性 زیر استفاده خواهیم کرد:

  • counter-reset - شمارنده یا شمارنده را تنظیم کنید
  • counter-increment - مقدار شمارنده را افزایش دهید
  • content - محتوایی که تولید می‌شود را وارد کنید
  • counter() یا counters() функشن - مقدار شمارنده را به عنصر اضافه کنید

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

مثال زیر یک شمارنده برای صفحه (در انتخاب‌گر body) ایجاد می‌کند، سپس مقدار شمارنده برای هر <h2> عناصر افزایش می‌دهد و در ابتدای هر <h2> عناصر "Section <مقدار شمارنده>:" اضافه می‌کند:

مثال

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 با استفاده از pseudo-element ::before و ::after به منظور اضافه کردن محتوای تولید شده به آن استفاده می‌شود.
counter-increment افزایش یک یا چند مقدار شمارنده.
counter-reset ایجاد یا ریست یک یا چند شمارنده.