CSS/counter-increment

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

بطاقة الخاصية

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

/* الزيادة بمقدار 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;

أمثلة

القاعدة الآتية ستزيد من قيمة العداد my-counter بمقدار 1:

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Bootstrap Tutorial</h2>
<h2>SQL Tutorial</h2>
<h2>PHP Tutorial</h2>

شيفرة CSS:

body {
    /* Set "my-counter" to 0 */
    counter-reset: my-counter;
}

h2::before {
    /* Increment "my-counter" by 1 */
    counter-increment: my-counter;
    content: "Section " counter(my-counter) ". ";
}

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

الميزة	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)‎.