انتقل إلى محتوى الدرس

Nested Numbering With Counters الترقيم المتداخل بدالة counters

أتقن الترقيم التلقائي بالعدادات في لغة CSS لترتيب عناوين المقالات ومؤشرات الخطوات المتتابعة والفهارس الهرمية المتداخلة تلقائياً عبر أوراق الأنماط دون تعديل الأرقام يدوياً أو كتابة نصوص برمجية.
2 صفوف تعليمية
لغة CSS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند بناء فهارس الكتب أو العقود القانونية أو الوثائق التقنية المتفرعة إلى عدة مستويات، يصبح ابتكار اسم عداد منفصل لكل مستوى أمراً مرهقاً وغير مرن. ولهذا توفر اللغة دالة الجمع counters()؛ فعندما تعيد كل قائمة متداخلة <ol> تهيئة العداد بالاسم نفسه counter-reset: item ينشئ المتصفح نسخة فرعية متداخلة دون مسح قيمة المستوى الأعلى.

وعند استدعاء counters(item, ".") تجمع الدالة جميع القيم النشطة للعداد من المستوى الخارجي حتى الداخلي مفصولة بالنقطة، فتنتج تلقائياً 1 ثم 1.1 ثم 1.2.1 مهما بلغ عمق التداخل.

الصف 2 كود برمجي
CSS
.toc {
  list-style: none;
  counter-reset: item;
}
.toc-entry { counter-increment: item; }
.toc-entry::before {
  content: counters(item, ".") " ";
  font-weight: 700;
}