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

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

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

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

W3C علاوه بر سبک‌های پشتیبانی شده توسط مرورگرها، سبک‌های شمارنده آماده را با پشتیبانی از 181 سبک دیگر در 45 سیستم نوشتاری منتشر کرد.

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

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

شمارنده ها

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

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

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

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

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

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

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

تعداد بخش را می توان با استفاده از counter-reset بر روی بدنه ایجاد کرد و سپس بر روی هر عنصر <h2> افزایش داد. می‌خواهیم تعداد پاراگراف‌ها برای هر بخش بازنشانی شود، بنابراین در عناصر <h2> counter-reset و در عناصر <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> ) از 0 شروع می‌شوند و برای هر عنصر یک عدد به‌شمار می‌آیند، به این معنی که اولین مورد به عنوان 1 شمارش می‌شود. اگر بخواهید تا 1 برعکس بشمارید چه؟

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