شمارنده های CSS (CSS Counters)
«شمارنده های CSS (CSS Counters)» متغیرهایی هستند که در خود CSS نگه داری می شوند و می توان با قوانین CSS مقدارشان را افزایش یا کاهش داد. بنابراین بدون جاوااسکریپت می توانید برای تیترها، بخش ها یا آیتم ها شماره گذاری پویا بسازید.
مقدمه شمارنده های CSS
برای کار با شمارنده ها از این ها استفاده می کنیم:
counter-reset— ایجاد یا ریست شمارندهcounter-increment— افزایش/کاهش شمارندهcontent— درج محتوای تولیدی در::beforeو::aftercounter()وcounters()— نمایش مقدار شمارنده
نکته: پیش از استفاده، شمارنده باید با counter-reset ساخته شود.
شماره گذاری خودکار با شمارنده ها
در نمونه زیر یک شمارنده می سازیم و هنگام رندر هر <h2> آن را افزایش می دهیم و به ابتدای تیتر اضافه می کنیم:
body { counter-reset: section; }
h2::before { counter-increment: section; content: "Section " counter(section) ": "; }پارامتر دوم counter-increment مقدار گام را تعیین می کند. می توانید کم یا زیاد کنید.
کاهش یا افزایش سفارشی
نسخه کاهشی و افزایشی با گام 2:
/* کاهش یکی یکی */
body { counter-reset: section; }
h2::before { counter-increment: section -1; content: "Section " counter(section) ": "; }
/* افزایش با گام دو */
body { counter-reset: section; }
h2::before { counter-increment: section 2; content: "Section " counter(section) ": "; }به کارگیری دو شمارنده
در این مثال برای <h1> شمارنده «بخش» و برای <h2> شمارنده «زیر بخش» داریم و خروجی مانند «Section 1.» و «1.1» خواهد بود:
body { counter-reset: section; }
h1 { counter-reset: subsection; }
h1::before { counter-increment: section; content: "Section " counter(section) ". "; }
h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }تابع counters() برای سطوح تو در تو
برای لیست های چندسطحی می توانید با counters() سطوح را با جداکننده نمایش دهید:
ol { counter-reset: section; list-style-type: none; }
li::before { counter-increment: section; content: counters(section, ".") " "; }هشدار: مقداردهی و نمایش شمارنده ها فقط در محتوای تولیدی با content (در ::before/::after) عمل می کند؛ آن را روی خود عنصر متنی قرار ندهید.
مسیرهای مرتبط
برای تمرین بیشتر به فرم ها سر بزنید و سپس درباره واحدها مطالعه کنید. همچنین برای هدف گیری دقیق، از انتخاب گرهای ویژگی کمک بگیرید.
برای مطالعه مرجع، راهنمای شمارنده های CSS در MDN و مستندات counter-increment را ببینید.