وقتی صحبت از طراحی وب می‌شود، استفاده از قابلیت‌های CSS می‌تواند تفاوت زیادی در ارائه یک صفحه وب حرفه‌ای و جذاب به کاربران ایجاد کند. یکی از ویژگی‌های جالب و گاها کمتر شناخته‌شده در CSS، استفاده از counter-reset است. این خاصیت در واقع به شما کمک می‌کند تا شمارنده‌هایی را در خصوصیات CSS خود تعریف و مدیریت کنید، که این می‌تواند برای شماره‌گذاری‌های داینامیک، مثل لیست‌های طولانی یا احیاناً ایجاد شمارنده‌های سفارشی، بسیار مفید باشد.
در خصوص counter-reset می‌توان گفت که این خاصیت عمدتاً با counter-increment و content مورد استفاده در CSS ترکیب می‌شود. با استفاده از این قابلیت‌ها، شما قادر خواهید بود تا شماره گذاری‌های خود را بدون نیاز به تغییر مستقیم در HTML کنترل کنید. این بدین معنی است که بدون توجه به تغییر ساختار لیست یا اضافه کردن آیتم‌های جدید، شماره‌گذاری به صورت خودکار بروز می‌شود.
در واقع، counter-reset به شما این امکان را می‌دهد تا در نقاط مشخصی از کد خود شمارنده جدیدی تعریف کنید و آن‌ها را بازنشانی کنید، مثلا ایجاد یک لیست شماره‌گذاری شده جدید یا شروع شماره گذاری‌های خاص از یک عدد خاص. این، به ویژه در توسعه صفحات با ساختارهای پیچیده‌تر، می‌تواند بسیار کارآمد باشد.
برای مثال، فرض کنید شما در حال طراحی یک وبسایت فروشگاهی هستید که در آن لیست محصولات به صورت مرتب و شماره‌گذاری شده نمایش داده می‌شود. از طریق کاربرد counter-reset می‌توانید به راحتی این شماره‌گذاری‌ها را مدیریت کرده و در صورت نیاز نحوه شروع شمارنده‌ها را تغییر دهید تا مثلاً هر دسته از محصولات از شماره یک شروع شود.
مثال کدنویسی
<style>
body {
counter-reset: section-counter;
}
h2::before {
counter-increment: section-counter;
content: "Section " counter(section-counter) ": ";
}
</style>
<h2>مقدمه</h2>
<h2>تاریخچه</h2>
<h2>کاربردها</h2>
توضیح کد
counter-reset: section-counter; - در اینجا، یک شمارنده به نام section-counter تعریف و مقدار اولیه آن صفر تنظیم می‌شود.
h2::before { counter-increment: section-counter; } - هر بار که یک عنصر h2 پیدا می‌شود، شمارنده section-counter یک واحد افزایش پیدا می‌کند.
content: "Section " counter(section-counter) ":"; - این خط قبل از هر h2، مقدار شمارنده و یک متن سفارشی را اضافه می‌کند.