آموزش ساخت شمارنده‌های (Counters) خودکار با استفاده از ویژگی counter-reset

رفیق برنامه‌نویس، تا حالا شده بخوای توی پروژه‌هات یه لیست یا بخش‌بندی با شماره‌گذاری خاص خودت داشته باشی؟ یا اصلاً بخوای بدون دردسر جاوااسکریپت و کلی کد اضافه، تیترها و زیرتیترها رو خودکار شماره‌گذاری کنی؟ اگه جوابت مثبته، پس درست اومدی! ویژگی counter-reset در CSS یکی از اون ابزارهای جادوییه که می‌تونه زندگیتو راحت کنه و بهت اجازه بده شمارنده‌های کاملاً سفارشی و پویا بسازی. اینجا قراره صفر تا صدشو با هم یاد بگیریم، از یه شمارنده ساده گرفته تا ساختارای پیچیده‌تر. می‌خوای بدونی چطوری این قابلیت کاربردی رو برای پروژه‌های CSS، HTML یا حتی وردپرس خودت پیاده‌سازی کنی؟ پس بزن بریم که کلی کد باحال در انتظارته! راستی، اگه دنبال ابزارهای خفن و کدهای آماده و اسنیپت‌های ناب می‌گردی، یه سر به سایتمون بزن، پشیمون نمیشی! برای هر سوالی هم می‌تونی با ما تماس بگیری: 09202232789

شمارنده‌های CSS: چرا و چگونه؟

حتماً توی وب، لیست‌هایی رو دیدی که خودشون شماره می‌خورن، یا شاید توی اسناد ورد، شماره‌گذاری اتوماتیک تیترها برات آشناست. خب، توی CSS هم یه مکانیزم قدرتمند برای این کار داریم به اسم “شمارنده‌ها” یا “Counters”. این ویژگی به ما اجازه می‌ده تا عددی رو تعریف کنیم، اون رو در نقاط مختلف سند افزایش بدیم و در نهایت نمایشش بدیم. مزیت اصلیش چیه؟ اینکه کاملاً با HTMLت ادغام می‌شه، نیازی به کدهای پیچیده جاوااسکریپت نداره، و خیلی راحت‌تر از شماره‌گذاری دستی قابل مدیریته. فرض کن هزار تا آیتم توی یه لیست داری و می‌خوای شماره‌گذاریش از یه عدد خاص شروع بشه یا اصلاً به جای عدد، از حروف استفاده کنی. اینجا دیگه شمارنده‌های CSS به کمکت میان.

آشنایی با اجزای اصلی سیستم شمارنده‌ها

سیستم شمارنده‌ها در CSS از چند جزء اصلی تشکیل شده که هر کدوم وظیفه خاصی دارن. درک این اجزا کلید تسلط بر این ویژگی کارآمده.

counter-reset: نقطه شروع شمارش

رفیق، این ویژگی دقیقاً همون جاییه که بازی رو شروع می‌کنی. counter-reset به مرورگر میگه که “هی، یه شمارنده جدید با این اسم ایجاد کن و مقدار اولیه‌اش رو اینقدر بذار.” معمولاً مقدار اولیه صفر هست، اما می‌تونی هر عددی رو بهش بدی. این کار رو روی عنصری انجام میدی که می‌خوای شمارش از اونجا آغاز بشه یا هر بار که اون عنصر تکرار میشه، شمارنده از نو شروع به شمارش کنه. مثلاً، اگه می‌خوای هر بخش جدیدی از یک صفحه، شمارنده‌های خودش رو داشته باشه، counter-reset رو روی عنصر <section> اعمال می‌کنی.

body {
    counter-reset: myCounter; /* یک شمارنده به نام myCounter با مقدار اولیه صفر ایجاد می‌کند */
}

section {
    counter-reset: sectionCounter; /* هر بخش جدید، شمارنده خودش رو از صفر شروع می‌کنه */
}

div.chapter {
    counter-reset: chapterNum 10; /* شمارنده chapterNum از عدد 10 شروع میشه */
}

counter-increment: افزایش گام‌به‌گام

بعد از اینکه شمارنده‌ات رو با counter-reset راه‌اندازی کردی، باید بهش بگی کی و چقدر بالا بره. اینجا CSS counter-increment وارد گود میشه. این ویژگی روی عنصری قرار می‌گیره که می‌خوای هر بار با ظاهر شدنش، شمارنده زیاد بشه. مثلاً، اگه برای هر <li> توی یه لیست، می‌خوای شمارنده یه واحد اضافه بشه، counter-increment رو روی <li> اعمال می‌کنی. می‌تونی حتی با دادن مقدار منفی، شمارنده رو کم هم کنی!

li {
    counter-increment: myCounter; /* با هر li، شمارنده myCounter یک واحد اضافه میشه */
}

h2 {
    counter-increment: sectionCounter 2; /* با هر h2، شمارنده sectionCounter دو واحد اضافه میشه */
}

counter() و counters(): نمایش شمارنده

خب، شمارنده‌ات رو ریست کردی و حالا هم داره زیاد میشه. اما چطوری باید ببینیمش؟ اینجا تابع‌های counter() و counters() وارد صحنه میشن. اینا توی ویژگی content (معمولاً در کنار ::before یا ::after) استفاده می‌شن تا مقدار فعلی شمارنده رو نشون بدن.

• counter(name, style): این تابع برای نمایش یک شمارنده واحد استفاده می‌شه. name اسم شمارنده‌ایه که تعریف کردی و style هم نوع نمایششه (مثلاً decimal برای عدد، lower-roman برای اعداد رومی کوچک، cjk-ideographic برای ایدئوگرام‌های چینی و ژاپنی و …). اگه style رو نذاری، پیش‌فرض decimal خواهد بود.
• counters(name, string, style): این یکی برای نمایش شمارنده‌های تودرتو (Nested Counters) عالیه. name همون اسم شمارنده است. string کاراکتریه که بین هر سطح از شمارنده قرار می‌گیره (مثلاً نقطه “.” برای 1.1 یا خط تیره “-” برای 1-1-1). style هم مثل قبل، نوع نمایشه.

li::before {
    content: counter(myCounter) ". "; /* مقدار myCounter رو به صورت عدد اعشاری (decimal) نشون میده */
}

h2::before {
    content: "بخش " counter(sectionCounter) ": "; /* نمایش به همراه متن "بخش" */
}

.nested-item::before {
    content: counters(chapterNum, ".") " "; /* نمایش شمارنده‌های تودرتو با جداکننده نقطه */
}

قدم به قدم: ساخت یک شمارنده ساده

خب، حالا که با مفاهیم اصلی آشنا شدی، بیا یه مثال عملی و گام به گام رو ببینیم. می‌خوایم یه لیست دلخواه بسازیم که آیتم‌هاش با یه شماره‌گذاری خاص شروع بشن و پیش برن.

سناریو 1: لیست با شماره‌گذاری سفارشی

فرض کن یه لیست از مراحل داری و نمی‌خوای از <ol> پیش‌فرض HTML استفاده کنی، بلکه دوست داری شماره‌ها بولد باشن، رنگشون فرق کنه و از عدد 5 شروع بشن.

<!-- فایل HTML شما -->
<div class="custom-list-container">
    <div class="list-item">گام اول: آماده‌سازی محیط</div>
    <div class="list-item">گام دوم: نصب پیشنیازها</div>
    <div class="list-item">گام سوم: اجرای برنامه</div>
    <div class="list-item">گام چهارم: تست و عیب‌یابی</div>
</div>

/* فایل CSS شما */
.custom-list-container {
    counter-reset: myCustomList 4; /* شمارنده "myCustomList" را از 4 ریست کن (یعنی با increment اول میشه 5) */
    list-style: none; /* لیست‌های پیش‌فرض را حذف می‌کند (اگر <ul> یا <ol> بود) */
    padding: 0;
}

.list-item {
    counter-increment: myCustomList; /* با هر آیتم، شمارنده یک واحد اضافه میشه */
    margin-bottom: 0.8em;
    padding-left: 2.5em; /* فضای کافی برای شماره */
    position: relative; /* برای قرار دادن شماره با ::before */
    font-size: 1.1em;
    color: #444;
}

.list-item::before {
    content: counter(myCustomList) ". "; /* مقدار شمارنده را نمایش بده */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #3498DB; /* رنگ آبی برای شماره */
    font-size: 1.2em;
}

همین! با این چند خط کد، یه لیست با شماره‌گذاری کاملاً سفارشی و دلخواه خودت داری که از عدد 5 شروع میشه. می‌تونی counter-reset رو روی 0 بذاری تا از 1 شروع بشه، یا هر عدد دیگه که دوست داری.

کاربردهای پیشرفته‌تر شمارنده‌ها

شمارنده‌های CSS فقط برای لیست‌های ساده نیستن؛ قدرت واقعی اونا توی سازماندهی ساختارهای پیچیده‌تر محتواست.

شماره‌گذاری تیترها و بخش‌ها (Headings and Sections)

یکی از بهترین کاربردهای شمارنده‌ها، شماره‌گذاری خودکار تیترهای صفحاته. مثلاً، می‌خوای <h2> ها به صورت 1, 2, 3 و <h3> ها زیرمجموعه اون‌ها باشن (مثلاً 1.1, 1.2, 2.1). این کار باعث میشه ساختار محتوای شما خیلی مرتب‌تر و خواناتر بشه، مخصوصاً برای مقالات طولانی یا کتاب‌های آنلاین.

<!-- فایل HTML شما -->
<article>
    <h2>معرفی</h2>
    <p>متن معرفی...</p>

    <h2>مفاهیم اصلی</h2>
    <h3>تعریف A</h3>
    <p>توضیحات A...</p>
    <h3>تعریف B</h3>
    <p>توضیحات B...</p>

    <h2>کاربردهای عملی</h2>
    <h3>مثال 1</h3>
    <p>متن مثال 1...</p>
    <h3>مثال 2</h3>
    <p>متن مثال 2...</p>
</article>

/* فایل CSS شما */
article {
    counter-reset: h2Counter; /* شمارنده اصلی برای h2 ها */
}

h2 {
    counter-increment: h2Counter; /* h2 ها رو زیاد کن */
    counter-reset: h3Counter; /* برای هر h2 جدید، شمارنده h3 رو ریست کن */
    position: relative;
    padding-left: 30px; /* برای فضای شماره */
}

h2::before {
    content: counter(h2Counter) ". ";
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #2C3E50;
}

h3 {
    counter-increment: h3Counter; /* h3 ها رو زیاد کن */
    position: relative;
    padding-left: 40px; /* برای فضای شماره */
}

h3::before {
    content: counter(h2Counter) "." counter(h3Counter) " "; /* نمایش ترکیبی 1.1 */
    position: absolute;
    left: 0;
    font-weight: normal;
    color: #555;
    font-size: 0.9em;
}

اینجا counter-reset: h3Counter; روی h2 استایل شده. این یعنی هر بار که یه h2 جدید میاد، شمارنده h3Counter دوباره از صفر شروع میشه. این تقییر کوچیک همون چیزیه که شماره‌گذاری تودرتو رو ممکن می‌کنه.

ساخت فهرست مطالب پویا (Dynamic Table of Contents)

با تکنیکی شبیه به شماره‌گذاری تیترها، می‌تونی یه فهرست مطالب (Table of Contents) هم با استفاده از شمارنده‌های CSS بسازی. البته این روش بیشتر برای نمایش هست و برای لینک‌دادن به بخش‌های مختلف نیاز به ID گذاری HTML و احتمالاً جاوااسکریپت هم هست. اما برای اینکه یک دید کلی از ساختار مقالت داشته باشی، بسیار کاربردیه.

شمارش عناصر تودرتو با counters() (Nested Counters)

فرض کن یه لیستی داری که خودش لیست‌های فرعی داره، و می‌خوای شماره‌گذاریش به این شکل باشه: 1, 1.1, 1.2, 2, 2.1, 2.1.1. اینجا counters() به دادت می‌رسه. این تابع اسم همه شمارنده‌های فعال از نوع خودش رو برمی‌گردونه و با یه string که بهش میدی، اونا رو به هم وصل می‌کنه.

<!-- فایل HTML شما -->
<ul class="nested-list">
    <li>آیتم اصلی 1
        <ul>
            <li>زیرآیتم 1.1</li>
            <li>زیرآیتم 1.2
                <ul>
                    <li>زیرزیرآیتم 1.2.1</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>آیتم اصلی 2</li>
</ul>

/* فایل CSS شما */
.nested-list {
    counter-reset: item; /* شمارنده اصلی را ریست کن */
    list-style-type: none; /* شماره‌گذاری پیش‌فرض را حذف کن */
    padding-left: 0;
}

.nested-list ul {
    list-style-type: none; /* شماره‌گذاری پیش‌فرض زیرلیست‌ها را هم حذف کن */
    padding-left: 20px; /* برای تو رفتگی */
}

.nested-list li {
    display: block; /* برای اینکه بتوانیم قبل از آیتم قرار دهیم */
    margin-bottom: 0.5em;
    position: relative;
    padding-left: 30px; /* فضای کافی برای شماره */
}

.nested-list li::before {
    counter-increment: item; /* هر li شمارنده را زیاد می‌کند */
    content: counters(item, ".") ". "; /* نمایش شمارنده‌های تودرتو با نقطه */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #27AE60;
}

با این روش، هر <ul> جدیدی که داخل یک <li> قرار بگیره، یک سطح جدید از شمارنده رو ایجاد می‌کنه و counters(item, ".") هم اونا رو به زیبایی با نقطه به هم وصل می‌کنه.

نکات کلیدی برای استفاده بهینه

برای اینکه بهترین نتیجه رو از شمارنده‌های CSS بگیری، چند تا نکته هست که باید بهشون دقت کنی:

• اهمیت content property: یادت باشه که بدون content و شبه‌عناصر ::before یا ::after، شمارنده‌هات هیچ وقت نمایش داده نمیشن. این خاصیت نقش حیاتی در بصری‌سازی مقادیر شمارنده داره.
• مرورگرهای سازگار (Browser Compatibility): خوشبختانه، counter-reset و خواص مرتبط با اون، پشتیبانی خیلی خوبی توی مرورگرهای مدرن دارن. تقریباً تمام نسخه‌های اخیر کروم، فایرفاکس، سافاری و اج بدون مشکل ازشون پشتیبانی می‌کنن. با این حال، اگه نیاز به پشتیبانی از مرورگرهای خیلی قدیمی داری، بهتره حتماً تست کنی.
• ملاحظات عملکردی (Performance): استفاده از شمارنده‌های CSS به طور کلی بهینه‌ست و تأثیر منفی قابل توجهی روی عملکرد صفحه نداره. اما اگه در تعداد خیلی زیاد و با استایل‌های پیچیده ازشون استفاده کنی، مثل هر ویژگی CSS دیگه، ممکنه یه مقدار تأخیر ایجاد بشه. همیشه بهینه‌سازی رو مد نظر داشته باش.
• پرهیز از تداخل: مطمئن شو که اسم شمارنده‌هات منحصر به فرده تا با شمارنده‌های دیگه تداخل پیدا نکنن.

جدول مقایسه‌ای: counter-reset در برابر روش‌های سنتی

شاید بپرسی چرا باید از counter-reset استفاده کنم وقتی میشه با <ol> یا حتی جاوااسکریپت این کارا رو انجام داد؟ این جدول مقایسه‌ای بهت نشون میده که هر روش کجا قوی‌تره:

عیب‌یابی سریع: مشکلات رایج و راه‌حل‌ها

مثل هر تکنولوژی دیگه‌ای، ممکنه موقع کار با شمارنده‌های CSS هم به مشکلاتی بربخوری. نگران نباش، اینا رایج‌ترین مشکلات و راه‌حل‌هاشون هستن:

• ⚠️ مشکل: شمارنده نمایش داده نمی‌شود.

  ✅ راه‌حل: اولین جایی که باید نگاه کنی، ویژگی content است. آیا از ::before یا ::after استفاده کردی؟ آیا content: counter(yourCounterName) رو به درستی نوشتی؟ همچنین مطمئن شو که counter-increment رو روی عنصر درست اعمال کردی.

• ⚠️ مشکل: شمارنده از صفر شروع نمی‌شود (یا اصلاً ریست نمی‌شود).

  ✅ راه‌حل: بررسی کن که counter-reset رو روی عنصر پدر یا عنصری که می‌خوای شمارش از اونجا شروع بشه، اعمال کرده باشی. گاهی اوقات این ویژگی رو روی عنصر اشتباهی قرار میدیم. همچنین، مطمئن شو که اسم شمارنده در counter-reset و counter-increment یکسانه.

• ⚠️ مشکل: شمارنده‌های تودرتو مشکل دارند (مثلاً 1.1.1 به درستی نمایش داده نمی‌شود).

  ✅ راه‌حل: برای شمارنده‌های تودرتو باید از counters() به جای counter() استفاده کنی. همچنین، مطمئن شو که counter-reset رو روی عنصری که والد عناصر تودرتو هست اعمال کردی. مثلاً، برای یک لیست تو در تو، counter-reset رو روی <ul> والد و counter-increment رو روی <li> اعمال کن.

• ⚠️ مشکل: شماره‌ها خارج از جای خود قرار می‌گیرند یا استایل درستی ندارند.

  ✅ راه‌حل: برای کنترل دقیق موقعیت شماره‌ها، از position: relative; روی عنصر اصلی و position: absolute; روی شبه‌عنصر ::before یا ::after استفاده کن. بعد با left، right، top، bottom و padding، موقعیت دلخواه رو اعمال کن. این کمک می‌کنه که رسپونسیو بودن هم حفظ بشه.

اگه بازم مشکل داشتی، یادت باشه که ابزارهای توسعه مرورگر (Developer Tools) بهترین دوستت هستن. با استفاده از اونا می‌تونی ببینی که کد CSS چطوری اعمال شده و مقادیر شمارنده چی هستن.

سوالات متداول (FAQ)

سخن پایانی

خب رفیق، رسیدیم به آخر این آموزش جذاب. امیدوارم حالا دید بهتری نسبت به قدرت ویژگی counter-reset و کلاً شمارنده‌های CSS پیدا کرده باشی. این ابزار کوچیک ولی قدرتمند، می‌تونه در طراحی‌های وب، مدیریت محتوا و حتی ساختاردهی اسناد آنلاین، حسابی کارتو راه بندازه و بهت کمک کنه کدهای تمیزتر و منعطف‌تری بنویسی. از لیست‌های ساده گرفته تا شماره‌گذاری پیچیده تیترها، همه و همه با این ویژگی به راحتی قابل پیاده‌سازی هستن. پس وقتشه که آستین بالا بزنی و با استفاده از این تکنیک، پروژه‌های خودتو یه سر و گردن از بقیه بالاتر ببری. یادت نره، برنامه‌نویسی یعنی خلاقیت، و این ویژگی بهت کلی فضای خلاقانه میده! اگه سوالی داشتی یا نیاز به کدهای بیشتر پیدا کردی، حتماً یه سر به سایت fa-tools.ir بزن. اونجا کلی اسنیپت جاوااسکریپت و کد پایتون هم منتظرته!

آموزش ساخت شمارنده‌های (Counters) خودکار با استفاده از ویژگی counter-reset

گاهی در طراهی و توسعه صفحات وب نیاز داریم که بخش‌های مختلف محتوا، مثل عناوین مقالات، تصاویر، یا مراحل یک فرآیند را به صورت خودکار شماره‌گذاری کنیم. انجام دستی این کار نه تنها وقت‌گیر است، بلکه با اضافه یا حذف شدن یک بخش، کل شماره‌گذاری‌ها به هم می‌ریزد. خوشبختانه با استفاده از ویژگی‌های قدرتمند CSS مانند counter-reset و counter-increment بدون نیاز به زبان‌های برنامه‌نویسی پیچیده، می‌توان شمارنده‌های خودکار، پویا و کاملاً واکنش‌گرا خلق کرد. در این مقاله به زبان ساده و کاربردی یاد می‌گیرید چطور سیستم شماره‌گذاری اختصاصی خود را بسازید.

۱. CSS Counter چیست و چرا به آن نیاز داریم؟

شمارنده‌ها در CSS متغیرهایی هستند که توسط خود مرورگر نگهداری می‌شوند و مقدار آن‌ها با توجه به قوانین استایلی که ما می‌نویسیم، افزایش می‌یابد. برعکس زبان‌های پویایی مثل جاوا اسکریپت که برای محاسبه مقادیر نیاز به تعریف توابع پیچیده و دستکاری DOM دارند، این ابزار مستقیماً در موتور رندرینگ مرورگر اجرا می‌شود و پرفورمنس بسیار بالایی دارد.

هنگامی که ساختار اصلی کدهای HTML را می‌نویسید، استفاده از لیست‌های مرتب (ol/li) پاسخگوی نیازهای ساده است؛ اما اگر بخواهید عناوین کل صفحه (تگ‌های h2 یا h3) یا کپشن‌های تصاویر خارج از ساختار لیست را شماره‌گذاری کنید، بهترین و اصولی‌ترین راه استفاده از کدهای CSS برای ایجاد شمارشگرهای خودکار است.

۲. سه رکن اصلی شمارنده‌ها در سی‌اس‌اس

برای راه‌اندازی هر نوع شمارشگری در صفحات وب، باید با سه دستور کلیدی کار کنید که مثل چرخ‌دنده‌های یک ساعت مچی با هم هماهنگ می‌شوند:

• counter-reset: این دستور یک شمارنده جدید تعریف کرده یا مقدار یک شمارنده موجود را صفر (یا هر عدد دلخواه دیگری) می‌کند.
• counter-increment: این دستور به مرورگر می‌گوید که با دیدن هر المان خاص، مقدار شمارنده را چقدر (مثلاً ۱ یا ۲ واحد) افزایش دهد.
• تابع counter() یا counters(): برای چاپ کردن مقدار فعلی شمارنده درون شبه‌المان‌های ::before یا ::after از طریق ویژگی content استفاده می‌شود.

۳. ویژگی counter-reset؛ نقطه شروع و راه‌اندازی

ویژگیهای counter-reset به عنوان آفریدگار و ریست‌کننده شمارنده عمل می‌کند. بدون نوشتن این ویژگی، مرورگر متوجه وجود متغیر جدید نخواهد شد. معمولاً این استایل به المان والد (مثل body یا کانتینر اصلی) اختصاص داده می‌شود.

سینتکس پایه این دستور بسیار ساده است:

/* تعریف شمارنده با نام دلخواه step و مقدار اولیه ۰ */
.container {
  counter-reset: step;
}

/* تعریف شمارنده با مقدار اولیه شروع از ۵ */
.custom-section {
  counter-reset: my-counter 5;
}

/* تعریف همزمان چند شمارنده */
body {
  counter-reset: chapter section subsection 0;
}

نکته جالب این است که اگر عددی جلوی نام شمارنده ننویسید، به طور پیش‌فرض مقدار آن صفر در نظر گرفته می‌شود. همچنین می‌توانید از اعداد منفی نیز استفاده کنید.

۴. آموزش گام‌به‌گام ساخت یک شمارنده ساده

بیایید با یک سناریوی پرکاربرد جلو برویم. فرض کنید می‌خواهیم برای تمامی تگ‌های <h2> در بخش وبلاگ یک شماره‌گذاری اتوماتیک با فرمت «بخش ۱. ، بخش ۲. و…» پیاده‌سازی کنیم.

مرحله اول: نوشتن ساختار HTML

ابتدا یک سند ساده ایجاد می‌کنیم:

<div class="blog-post">
  <h2>مقدمه و تعاریف اولیه</h2>
  <p>متن این بخش در اینجا قرار می‌گیرد...</p>
  
  <h2>پیش‌نیازها و ابزارها</h2>
  <p>توضیحات مربوط به ابزارهای مورد نیاز...</p>
  
  <h2>پیاده‌سازی نهایی کد</h2>
  <p>کدهای پروژه را در این بخش می‌نویسیم...</p>
</div>

مرحله دوم: استایل‌دهی و راه‌اندازی شمارنده در CSS

اکنون کدهای سی‌اس‌اس زیر را برای شروع شمارش اعمال می‌کنیم. ابتدا شمارنده را روی کلاس والد ریست کرده و سپس روی تگ هدف اضافه می‌کنیم:

/* گام اول: تعریف متغیر شمارنده به نام my-blog-counter */
.blog-post {
  counter-reset: my-blog-counter;
}

/* گام دوم: افزایش دادن مقدار شمارنده برای هر تگ h2 */
.blog-post h2 {
  counter-increment: my-blog-counter;
}

/* گام سوم: نمایش مقدار شمارنده قبل از عنوان اصلی با استایل شیک */
.blog-post h2::before {
  content: "بخش " counter(my-blog-counter) ". ";
  color: #2563eb;
  font-weight: bold;
  margin-left: 8px;
}

۵. ساخت شمارنده‌های تودرتو (Nested Counters)

یکی از جذاب‌ترین بخش‌های کار با شمارنده‌ها، ایجاد سیستم‌های شماره‌گذاری تودرتو یا چندسطحی است (مانند: ۱، ۱.۱، ۱.۲، ۱.۲.۱). این روش برای کتاب‌ها، پایان‌نامه‌ها، فهرست‌های طولانی و اسناد فنی فوق‌العاده کاربردی است.

برای این کار از تابع counters() (به همراه “s” در انتها) استفاده می‌شود. این تابع یک آرگومان اضافه برای تعیین کاراکتر جداکننده (مثلاً نقطه یا خط تیره) دریافت می‌کند.

/* ریست کردن شمارنده در المان ریشه لیست */
ol {
  list-style-type: none;
  counter-reset: section;
}

/* ریست مجدد برای سطوح تودرتو و افزایش مقدار */
li {
  counter-increment: section;
}

/* نمایش ساختار چندسطحی */
li::before {
  content: counters(section, ".") " ";
  color: #4f46e5;
  font-weight: 700;
  margin-left: 5px;
}

با قطعه کد بالا، هر چقدر لیست شما تودرتوتر شود، مرورگر به صورت خودکار عمق تودرتویی را تشخیص داده و خروجی‌هایی شبیه به 1.2.4 تولید خواهد کرد.

۶. شخصی‌سازی ظاهر شماره‌ها

به طور پیش‌فرض، اعداد به صورت ریاضی و اعشاری نمایش داده می‌شوند. اما شما می‌توانید فرمت شمارش را به حروف الفبا، اعداد رومی، یونانی یا حتی حروف فارسی و عربی تغیییر دهید!

برای این کار، آرگومان دوم را به تابع counter() ارسال کنید:

/* نمایش به صورت حروف ابجد فارسی */
span::before {
  content: counter(my-counter, persian) " - ";
}

/* نمایش به صورت اعداد رومی کوچک */
span::before {
  content: counter(my-counter, lower-roman) " ) ";
}

۷. جدول مقایسه متدهای شماره‌گذاری

در جدول زیر تفاوت و کاربردهای متدهای مختلف شماره‌گذاری در صفحات وب را به طور خلاصه بررسی کرده‌ایم:

۸. کاربرد شمارنده‌ها در سیستم‌های مدیریت محتوا

یکی از بزرگترین چالش‌های وب‌مستران و توسعه‌دهندگانی که با سیستم‌هایی مثل وردپرس کار می‌کنند، تولید خودکار شمارنده‌ها روی قالب بدون نیاز به نصب افزونه‌های سنگین است. برای مثال با قرار دادن شیوه شمارش اتوماتیک در استایل پوسته خود، می‌توانید ظاهر کاملاً یکدستی به مقالات وب‌سایت هدیه دهید. برای بهینه‌سازی قالب‌های پیشرفته یا ویرایش فایل‌های استایل می‌توانید از کدهای آماده وردپرس استفاده کنید تا تداخلی با سایر بخش‌های قالب به وجود نیاید.

حتی اگر با زبان‌های برنامه‌نویسی دیگری مثل پایتون در سمت فرانت‌اند کار می‌کنید یا در فریم‌ورک‌های مدرن فعالیت دارید، همچنان پیاده‌سازی این سیستم در بخش کلاینت به عهده کدهای تمیز و استاندارد CSS است. برای دریافت ایده‌های جذاب‌تر حتماً نگاهی به مجموعه کدهای آماده ما بیندازید تا پروژه‌های خلاقانه‌تری خلق کنید.

۹. حل مشکلات رایج و عیب‌یابی سریع (Troubleshooting)

گاهی پیش می‌آید که کدها را به درستی می‌نویسیم، اما خروجی نهایی آن چیزی که انتظار داریم نیست. در ادامه راهکارهای رفع سه خطای متداول را بررسی می‌کنیم:

۱۰. سوالات متداول (FAQ)