العدادات وأنماط القوائم

من الأفضل تمثيل العديد من أنواع المحتوى كقائمة HTML . بالنسبة إلى محتوى القائمة المرتّبة، مثل خطوات الوصفة أو الحواشي السفلية لمقالة، غالبًا ما يحتوي الواسم على معلومات أيضًا. يوفر CSS عدة طرق للتحكّم في العدادات في القائمة.

أنماط القوائم

تتوفّر مجموعة كبيرة من أنواع أنماط القوائم المحدّدة مسبقًا التي تتيح استخدام الأرقام والأحرف الأبجدية والأرقام الرومانية والعديد من أنظمة العدّ الدولية.

بالإضافة إلى الأنماط التي تتيحها المتصفّحات، نشرت W3C ‏أنماط عدّ جاهزة، تتيح استخدام 181 نمطًا إضافيًا في 45 نظام كتابة.

إذا لم تكن هذه الخيارات مناسبة لاحتياجاتك، يمكنك أيضًا تحديد مخصّص @counter-style. يتيح لك ذلك تحديد رموز مخصّصة وبادئة ولاحقة وغير ذلك.

يكون واضع علامة العنصر outside القائمة تلقائيًا، ويتم وضعه أمام القائمة ومحاذاته إلى اليسار. يمكنك أيضًا وضع واضع علامة العنصر داخل القائمة باستخدام list-style-position: inside.

العدادات

في حين تتحكّم أنماط القوائم في كيفية عرض واضعي علامات عناصر القائمة، تتيح لك العدادات التحكّم في القيم التي سيتم عرضها. بالنسبة إلى عناصر القائمة <li>، ينشئ المتصفّح عدّادًا باسم list-item يتم زيادته بمقدار 1 لكل عنصر قائمة يتم العثور عليه.

تحتفظ عدّادات CSS بعدد متزايد لعدد مرّات عرض عنصر تم ضبط قيمة counter-increment مقابلة له.

لإنشاء عدّاد جديد، استخدِم counter-reset مع اسم عدّاد وقيمة أولية اختيارية. غالبًا ما يتم ضبط ذلك على عنصر رئيسي يتضمّن جميع العناصر التي سيتم عدّها.

بعد ذلك، أضِف السمة counter-increment إلى كل عنصر تريد عدّه.

أخيرًا، اعرض قيمة العداد باستخدام الدالة counter().

في هذا المثال، نريد عرض العدد المتزايد للحواشي السفلية كنص الرابط لكل حاشية سفلية. بما أنّنا نريد عدّادًا واحدًا للمستند بأكمله، نضبط counter-reset: note على النص الأساسي، ونزيد العداد في كل رابط حاشية سفلية.

يمكنك أيضًا استخدام عدّادات متعددة لعدّ عناصر مختلفة. في مثال الحواشي السفلية، ماذا لو أردت عرض فهرس القسم والفقرة اللذين تتضمّنهما الحاشية السفلية؟

يمكن إنشاء عدّاد القسم في النص الأساسي باستخدام counter-reset، ثم زيادته في كل عنصر <h2>. نريد إعادة ضبط عدّاد الفقرات لكل قسم، لذا سنستخدم counter-reset في عناصر <h2>، ونزيد العداد في عناصر <p>

أخيرًا، نجمع قيم العداد في السمة content.

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

العدادات المتداخلة

ماذا يحدث عند وضع قائمة داخل قائمة؟ تتم تهيئة العداد list-item لكل عنصر <ul> أو <ol>، ولا تعرض الدالة counter() إلا عدد العدّ الداخلي. إذا أردت عرض العدد من كل عدّاد من العدادات المتداخلة، استخدِم الدالة counters()، التي تأخذ اسم عدّاد وفاصلًا.

li::marker {
  content: counters(list-item, ".")
  }

عكس العدادات

تبدأ العدادات تلقائيًا (بما في ذلك العداد الضمني list-item لعناصر <ol>) من 0، وتزيد بمقدار واحد لكل عنصر، ما يعني أنّ العنصر الأول سيتم عدّه على أنّه 1. ماذا لو أردت العدّ تنازليًا إلى 1؟

لإجراء ذلك، أضِف السمة reversed إلى <ol>. إذا كنت تستخدم نمط القائمة العادي، ستعمل الواسمات على النحو المتوقّع. ومع ذلك، إذا كنت تستخدم عدّادًا مخصّصًا، عليك ضبط counter-increment على قيمة سالبة، وحساب قيمة البداية للعداد يدويًا.

التحقق من الفهم