انواع مختلف CSS Counter Styles

سلام به همه دوستان مینی‌لرنی! امروز می‌خواهیم در مورد یک موضوع خیلی جالب و مفید به نام "CSS Counter Styles" صحبت کنیم. این ویژگی‌ها به ما اجازه می‌دهند که به راحتی و بدون نیاز به استفاده از جاوا اسکریپت، لیست‌های عددی و ترتیبی متنوعی ایجاد کنیم. این قابلیت‌ها به خصوص برای طراحی سایت‌هایی که لیست‌های زیادی دارند، مثل وبلاگ‌ها، لیست‌های آجاکس و منوهای طولانی، بسیار مفید هستند. پس با من همراه باشید!

در واقع، یکی از ویژگی‌های CSS که شاید کمتر به آن توجه کرده باشیم، توانایی ایجاد و استفاده از "counter" یا شمارنده‌ها در لیست‌هاست. با استفاده از CSS Counters می‌توانیم به سادگی کنترل بیشتری بر روی نمایش لیست‌ها داشته باشیم و حتی آن‌ها را سفارشی‌سازی کنیم. فرض کنید می‌خواهید لیستی از کارهایی که باید انجام دهید را با شماره‌گذاری رومی نشان دهید؛ با CSS Counters این کار به آسانی امکان‌پذیر است.

ایجاد یک شمارنده در CSS شامل استفاده از خاصیت‌هایی مانند counter-reset و counter-increment است. همچنین، می‌توانید با استفاده از تابع counter() نمایش شمارنده را درون محتوای CSS تغییر دهید. جالب است که می‌توانید شمارشگرها را به صورت سفارشی ایجاد کنید و مثلاً به جای اعداد، از حروف الفبا استفاده کنید.

برای اعمال CSS Counter Styles، ابتدا باید در نظر داشته باشید که این ویژگی‌ها تنها برای عناصر لیست یا هر عنصر دیگری که به هر نحوی بخشی از یک فهرست است، کاربرد دارند. بنابراین، قبل از استفاده باید مطمئن شوید که کاربرد مناسبی برای این ویژگی‌ها دارید. در ادامه با یک مثال عملی این موضوع را بیشتر بررسی می‌کنیم.

<style>
  ul {
    counter-reset: my-counter;
  }
  li {
    counter-increment: my-counter;
  }
  li::before {
    content: counter(my-counter) ". ";
  }
</style>
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

<style>
با این تگ شروع می‌کنیم تا به CSS خود را درون سند HTML اضافه کنیم.

ul { counter-reset: my-counter; }
این خط یک شمارنده به نام my-counter برای عنصر ul شروع می‌کند.

li { counter-increment: my-counter; }
هر بار که یک li جدید وارد می‌شود، شمارنده my-counter یک واحد افزایش می‌یابد.

li::before { content: counter(my-counter) ". "; }
این خط مقدار شمارنده را قبل از محتوای واقعی li نشان می‌دهد.

<ul> و </ul>
این تگ‌ها نشان‌دهنده آغاز و پایان یک لیست بدون ترتیب هستند.

<li>First Item</li>
این خط نشان‌دهنده یک آیتم لیست با عنوان "First Item" است.

و به همین ترتیب برای سایر آیتم‌های لیست.