ویژگی counter-set CSS

تعریف و استفاده

counter-set این ویژگی برای ایجاد و تنظیم CSS شمارنده به یک مقدار خاص استفاده می‌شود.

counter-set علاوه بر counter-increment و content، این ویژگی‌ها معمولاً با هم استفاده می‌شوند.

مثال

مثال 1

یک شمارنده ("my-counter") ایجاد کنید، آن را به 5 تنظیم کنید و هر بار که <h2> انتخابگر ظاهر می‌شود، آن را 1 افزایش دهید:

body {
  /* "my-counter" را به 5 تنظیم کنید */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" را 1 افزایش دهید */
  counter-increment: my-counter;
  content: "بخش " counter(my-counter) ". ";
}

خودتان امتحان کنید

مثال 2

یک شمارنده ("my-counter") ایجاد کنید، آن را به 5 تنظیم کنید و هر بار که <h2> انتخابگر ظاهر می‌شود، آن را 1 کاهش دهید:

body {
  /* "my-counter" را به 5 تنظیم کنید */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" را 1 کاهش دهید */
  counter-increment: my-counter -1;
  content: "بخش " counter(my-counter) ". ";
}

خودتان امتحان کنید

مثال 3

از فرمت‌هایی مانند "بخش 10:"، "10.1"، "10.2" و غیره برای شماره‌گذاری بخش‌ها و زیربخش‌ها استفاده کنید:

body {
  /* "بخش" را به 9 تنظیم کنید */
  counter-set: بخش 9;
}
h1 {}}
  /* "subsection" را به 0 تنظیم کنید */
  counter-set: subsection 0;
}
h1::before {
  /* "section" را 1 افزایش دهید */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* "subsection" را 1 افزایش دهید */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

خودتان امتحان کنید

مثال 4

یک شمارنده ایجاد کنید، آن را به 9 تنظیم کنید و در هر بار که انتخاب‌گر <h2> ظاهر می‌شود، آن را 1 افزایش دهید (با استفاده از اعداد رومی):

body {
  /* "my-counter" را به 9 تنظیم کنید */
  counter-set: my-counter 9;
}
h2::before {
  /* "my-counter" را 1 افزایش دهید */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

خودتان امتحان کنید

نوشتار CSS

counter-set: none|counter-name number|initial|inherit;

مقدار ویژگی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.

صفحات مرتبط

مطالعه:عنصر جعلی ::before

مطالعه:عنصر جعلی ::after

مطالعه:ویژگی content CSS

مطالعه:ویژگی counter-increment CSS

مطالعه:توابع counter() CSS