CSS/counter-increment

الخاصية counter-increment في CSS تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset.

/* الزيادة بمقدار 1 */
counter-increment: my-counter;

/* الإنقاص بمقدار 1 */
counter-increment: my-counter -1;

/* زيادة أحد العدادات بمقدار 1 وإنقاص الثاني بمقدار 4*/
counter-increment: counter1 counter2 -4;

/* عدم زيادة أو إنقاص أيّ عداد، وتُستخدَم لتجاوز القواعد التي لها أولوية أقل */
counter-increment: none;

/* القيم العامة */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;

القيمة الابتدائية	none
تُطبَّق على	كل العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

القاعدة الآتية ستزيد من قيمة العداد chapter و page بمقدار 1، وستزيد العداد section بمقدار 2:

h1 {
  counter-increment: chapter section 2 page;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	2.0	1.0	8.0	9.2	1.0

البنية العامة

تقبل الخاصية counter-increment أحد الأشكال الآتية:

• قيمة <custom-ident> تُسمي العداد ويتبعها اختياريًا عدد صحيح <integer>، ويمكنك تحديد أي عدد تشاء من العدّادات لزيادة أو إنقاص قيمتها ويُفصَل بين كل زوجين من القيم بفراغ.
• الكلمة المحجوزة none.

القيمة <custom-ident>

اسم العدّاد الذي نريد زيادة أو إنقاص قيمته.

القيمة <integer>

القيمة التي ستُضاف إلى العداد، والقيمة الافتراضية هي 1.

القيمة none

لا يجب زيادة أيّ عداد، وتُستخدَم هذه القيمة كقيمة افتراضية، أو لإلغاء زيادة أو إنقاص العدادات إذا كانت درجة تحديد القاعدة أكبر.

البنية الرسمية

counter-increment: [ <custom-ident> <integer>? ]+ | none

مصادر ومواصفات

• مسودة CSS Lists and Counters Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.