عرض مصدر CSS/counter-increment

<noinclude>{{DISPLAYTITLE:الخاصية <code>counter-increment</code>}}</noinclude>
الخاصية <code>counter-increment</code> في CSS تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية <code>[[CSS/counter-reset|counter-reset]]</code>.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|كل العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}
<syntaxhighlight lang="css">
/* الزيادة بمقدار 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;

</syntaxhighlight>

== أمثلة ==
القاعدة الآتية ستزيد من قيمة العداد <code>my-counter</code> بمقدار <code>1</code>: <syntaxhighlight lang="css">
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Bootstrap Tutorial</h2>
<h2>SQL Tutorial</h2>
<h2>PHP Tutorial</h2>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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) ". ";
}
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|2.0
|1.0
|8.0
|9.2
|1.0
|}

== البنية العامة ==
تقبل الخاصية <code>counter-increment</code> أحد الأشكال الآتية:
* <code>[[CSS/custom-ident|<custom-ident>]]</code> تُسمي العداد ويتبعها اختياريًا عدد صحيح <code>[[CSS/integer|<integer>]]</code>، ويمكنك تحديد أي عدد تشاء من العدّادات لزيادة أو إنقاص قيمتها ويُفصَل بين كل زوجين من القيم بفراغ.
* الكلمة المحجوزة <code>none</code>.

=== <code>[[CSS/custom-ident|<custom-ident>]]</code> ===
اسم العدّاد الذي نريد زيادة أو إنقاص قيمته.

===  <code>[[CSS/integer|<integer>]]</code> ===
القيمة التي ستُضاف إلى العداد، والقيمة الافتراضية هي <code>1</code>.

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

=== البنية الرسمية ===
<syntaxhighlight lang="css">
counter-increment: [ <custom-ident> <integer>? ]+ | none
</syntaxhighlight>

== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/counter-reset|counter-reset]]</code> التي تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-lists-3/#propdef-counter-increment CSS Lists and Counters Module Level 3].
* مواصفة ‎[http://www.w3.org/TR/CSS2/generate.html#propdef-counter-increment CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS List|{{SUBPAGENAME}}]]