CSS کاؤنٹر سیٹ اپریشن

تعریف و استعمال

کاؤنٹر-سیٹ عوامل کاؤنٹر کا سیٹ کرنا اور اس کو سیٹ کرنا کا کام کرتا ہے۔

کاؤنٹر-سیٹ عوامل عام طور پر کاؤنٹر-اینکریمنٹ عوامل اور کامنٹ عوامل کے ساتھ استعمال کئے جاتے ہیں。

مثال

مثال 1

یک شمارنده ("میرا-کاؤنٹر") بنائیں، اس کو 5 سیٹ کیا جائے اور ہر بار <h2> انتخابگر میں آپت ہونے پر اس کو 1 اضافہ کیا جائے:

body {
  /* میرا-کاؤنٹر کو 5 میں سیٹ کیا جا رہا ہے */
  کاؤنٹر-سیٹ: میرا-کاؤنٹر 5;
}
h2::before {
  /* "my-counter" را 1 افزایش دهید */
  counter-increment: my-counter;
  کامنٹ: "سیکشن " کاؤنٹر(میرا-کاؤنٹر) ". ";
}

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

مثال 2

یک شمارنده ("میرا-کاؤنٹر") بنائیں، اس کو 5 سیٹ کیا جائے اور ہر بار <h2> انتخابگر میں آپت ہونے پر اس کو 1 کم کیا جائے:

body {
  /* میرا-کاؤنٹر کو 5 میں سیٹ کیا جا رہا ہے */
  کاؤنٹر-سیٹ: میرا-کاؤنٹر 5;
}
h2::before {
  /* میرا-کاؤنٹر کو 1 کم کیا جا رہا ہے */
  کاؤنٹر-اینکریمنٹ: میرا-کاؤنٹر -1;
  کامنٹ: "سیکشن " کاؤنٹر(میرا-کاؤنٹر) ". ";
}

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

مثال 3

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

body {
  /* سیکشن کو 9 میں سیٹ کیا جا رہا ہے */
  کاؤنٹر-سیٹ: سیکشن 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 پیکر

مراجعه:CSS کنٹینٹ اپریشن

مراجعه:CSS کاؤنٹر انکریمنت اپریشن

مراجعه:CSS counter() فنکشن