شمارنده ها و سبک های لیست

بسیاری از انواع محتوا به بهترین شکل به صورت یک لیست HTML نمایش داده می‌شوند. برای محتوای لیست مرتب، مانند مراحل دستور غذا یا پاورقی‌های یک مقاله، نشانگر اغلب حاوی اطلاعات نیز هست. CSS روش‌های مختلفی برای کنترل شمارنده‌ها در یک لیست ارائه می‌دهد.

سبک‌های فهرست

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

علاوه بر سبک‌های پشتیبانی‌شده توسط مرورگرها، W3C سبک‌های شمارنده آماده را منتشر کرد که از ۱۸۱ سبک اضافی در ۴۵ سیستم نوشتاری پشتیبانی می‌کند.

اگر این گزینه‌ها نیازهای شما را برآورده نمی‌کنند، می‌توانید یک @counter-style ‎ سفارشی نیز تعریف کنید. این به شما امکان می‌دهد نمادهای سفارشی، پیشوند و پسوند و موارد دیگر را مشخص کنید.

به طور پیش‌فرض، نشانگر آیتم outside از لیست، در جلوی لیست و در تراز راست قرار دارد. همچنین می‌توانید نشانگر آیتم را با استفاده از list-style-position: inside درون لیست قرار دهید.

شمارنده‌ها

در حالی که سبک‌های لیست نحوه نمایش نشانگرهای آیتم‌های لیست را کنترل می‌کنند، شمارنده‌ها به شما امکان می‌دهند مقادیری را که باید نمایش داده شوند کنترل کنید. برای عناصر آیتم لیست <li> ، مرورگر یک شمارنده به نام list-item ایجاد می‌کند که برای هر آیتم لیست که با آن مواجه می‌شود، ۱ واحد افزایش می‌یابد.

شمارنده‌های CSS تعداد دفعاتی که یک عنصر که دارای یک مجموعه مقدار counter-increment متناظر است، رندر می‌شود را به صورت مداوم نگه می‌دارند.

برای ایجاد یک شمارنده جدید، counter-reset به همراه یک نام شمارنده و در صورت تمایل، یک مقدار اولیه استفاده کنید. اغلب این مقدار را روی عنصر والدی تنظیم می‌کنید که تمام عناصری را که شمارش خواهند شد، در خود جای داده است.

سپس، یک ویژگی counter-increment به هر عنصری که می‌خواهید شمارش کنید، اضافه کنید.

در نهایت، مقدار شمارنده را با استفاده از counter() نمایش دهید.

در این مثال، می‌خواهیم تعداد پاورقی‌ها را به صورت متن پیوند برای هر پاورقی نمایش دهیم. از آنجایی که می‌خواهیم یک شمارنده برای کل سند داشته باشیم، counter-reset: note روی بدنه و مقدار increment را روی هر پیوند پاورقی تنظیم می‌کنیم.

همچنین می‌توانید چندین شمارنده داشته باشید که موارد مختلف را شمارش می‌کنند. در مثال پاورقی‌ها، اگر می‌خواستید فهرست بخش و پاراگرافی را که پاورقی در آن قرار دارد نمایش دهید، چه می‌کردید؟

تعداد بخش‌ها را می‌توان با استفاده از counter-reset در بدنه ایجاد کرد و سپس روی هر عنصر <h2> یک واحد افزایش داد. ما می‌خواهیم تعداد پاراگراف‌ها برای هر بخش تنظیم مجدد شود، بنابراین counter-reset روی عناصر <h2> و یک واحد افزایش روی عناصر <p> استفاده خواهیم کرد.

در نهایت، مقادیر شمارنده را در ویژگی content ترکیب می‌کنیم.

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

شمارنده‌های تو در تو

وقتی یک لیست را درون یک لیست دیگر قرار می‌دهید چه اتفاقی می‌افتد؟ شمارنده‌ی list-item برای هر عنصر <ul> یا <ol> مقداردهی اولیه می‌شود و استفاده از counter() فقط عدد داخلی‌ترین شمارش را برمی‌گرداند. اگر می‌خواهید شمارش هر یک از شمارنده‌های تو در تو را نشان دهید، از تابع counters() استفاده کنید که یک نام شمارنده و یک جداکننده می‌گیرد.

li::marker {
  content: counters(list-item, ".")
  }

معکوس کردن شمارنده‌ها

به طور پیش‌فرض، شمارنده‌ها (از جمله شمارنده ضمنی list-item برای عناصر <ol> ) از ۰ شروع می‌شوند و برای هر عنصر یک واحد به سمت بالا شمارش می‌شوند، به این معنی که اولین عنصر به عنوان ۱ شمارش می‌شود. اگر بخواهید به صورت معکوس تا ۱ بشمارید، چه باید کرد؟

برای انجام این کار، ویژگی reversed را به <ol> اضافه کنید. اگر از سبک لیست استاندارد استفاده می‌کنید، نشانگرها مطابق انتظار کار خواهند کرد. با این حال، اگر از یک شمارنده سفارشی استفاده می‌کنید، باید counter-increment روی یک مقدار منفی تنظیم کنید و مقدار شروع شمارنده را به صورت دستی محاسبه کنید.

درک خود را بررسی کنید