شمارشگر های CSS ، متغیر هایی هستند که برای کدهایی از CSS استفاده می شوند که مقدار آنها می تواند توسط دستور های CSS افزایش یابد ( برای تعیین اینکه چند بار استفاده شده اند). شمارشگر ها می توانند به تنظیم ظاهر محتوا بر اساس محل قرارگیری آنها در سند ، کمک کنند.

شماره گذاری خودکار با شمارشگر ها

شمارشگر های CSS مانند "متغیر ها" می باشند. مقادیر متغیر می توانند توسط دستور های CSS افزایش یابند.

برای کار با شمارشگر های CSS از صفت های زیر استفاده خواهیم کرد :


counter-reset - یک شمارشگر را ایجاد را دوباره راه اندازی می کند.
counter-increment - افزایش مقدار یک شمارشگر
content - ورود محتای تولید شده
counter() or counters() function - افزودن مقدار یک شمارشگر به یک عنصر


برای استفاده از یک شمارشگر CSS ، ابتدا باید آن را با استفاده از counter-reset ایجاد کنیم.

در مثال زیر ، شمارشگری برای صفحه (در سلکتور body) ، و سپس مقدار افزایشی شمارشگر برای هر عنصر <h2> ایجاد شده است. سپس Section <value of the counter به ابتدای هر عنصر <h2> اضافه شده است.

مثال :

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

شمارشگرهای تو در تو

در مثال زیر ، یک شمارشگر برای صفحه ( section ) و یک شمارشگر دیگر برای هر عنصر <h1> ایجاد شده است ( subsection ). شمارشگر section هر عنصر h1 را که دارای <Section <value of the section counter باشد شماره گذاری می کند و شمارشگر subsection  هر عنصر h2 که دارای <value of the section counter>.<value of the subsection counter> باشد ، شماره گذاری می کند.

مثال :

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) " ";
}

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}

صفات شمارشگر ها در CSS