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

<noinclude>{{DISPLAYTITLE:الخاصية <code>counter-reset</code>}}</noinclude>
الخاصية <code>counter-reset</code> في CSS تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، بينما يمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية <code>[[CSS/counter-increment|counter-increment]]</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">
/* ضبط قيمة العداد إلى 0 */
counter-reset: my-counter;

/* ضبط قيمة العداد إلى -1 */
counter-reset: my-counter -1;

/* ضبط قيمة أوّل عداد إلى 1 وثاني عدّاد إلى 4 */
counter-reset: counter1 1 counter2 4;

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

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

</syntaxhighlight>

== أمثلة ==
القاعدة الآتية ستعين قيمة العداد <code>my-counter</code> بمقدار <code>0</code>، ثم ستزيد من قيمة العداد <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
|3.1
|}

== البنية العامة ==
تقبل الخاصية <code>counter-reset</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>0</code>.

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

=== البنية الرسمية ===
<syntaxhighlight lang="css">
counter-reset: [ <custom-ident> <integer>? ]+ | none
</syntaxhighlight>
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-lists-3/#counter-reset CSS Lists and Counters Module Level 3].
* مواصفة ‎[http://www.w3.org/TR/CSS2/generate.html#propdef-counter-reset CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS List|{{SUBPAGENAME}}]]