در CSS، شمارنده‌ها به عنوان متغیرهایی عمل می‌کنند که برای اهداف شمارش استفاده می‌شوند. این‌ها می‌توانند با قوانین CSS افزایش یا کاهش یابند. شمارنده‌های CSS به ما امکان می‌دهند تا نمایش محتوا را بسته به موقعیت آن تغییر دهیم. به عنوان مثال، می‌توانید از شمارنده‌ها برای اختصاص خودکار اعداد به پاراگرافها، سربرگ‌ها و لیست‌ها استفاده کنید.
Nesting Counters
در CSS، می‌توانیم از تابع counters() همراه با خاصیت‌های counter-reset و counter-increment استفاده کنیم تا لیست‌های بازنویسی شده با شمارنده‌های تو در تو ایجاد کنیم. این تکنیک به شما امکان می‌دهد که به طور خودکار شمارنده‌ها را برای سطوح مختلفی از تو در تو ایجاد کنید.
در مثال زیر، یک ساختار تو در تو با استفاده از عنصر <ol> برای نمایش تو در توی شمارنده‌ها نشان داده شده است.
<html>
<head>
<title>Nesting of Counter</title>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
</style>
</head>
<body>
<ol>
<li>Section 1
<ol>
<li>Subsection 1.1</li>
<li>Subsection 1.2</li>
<li>Subsection 1.3</li>
</ol>
</li>
<li>Section 2
<ol>
<li>Subsection 2.1</li>
<li>Subsection 2.2</li>
<li>Subsection 2.3</li>
</ol>
</li>
<li>Section 3
<ol>
<li>Subsection 3.1</li>
<li>Subsection 3.2</li>
<li>Subsection 3.3</li>
</ol>
</li>
</ol>
</body>
</html>در این مثال، ما از counter-reset با مقدار section برای تنظیم شمارنده واحدهای شمارش استفاده کرده‌ایم. هر بار که یک عنصر li در داخل یک عنصر ol قرار می‌گیرد، ما از counter-increment با مقدار section برای افزایش شمارنده استفاده می‌کنیم. سپس با استفاده از تابع counters()، شماره سطر و شماره زیر شاخه‌ها را نمایش می‌دهیم.
Reversed counter
شمارنده‌های معکوس یک نوع خاص از شمارنده‌ها هستند که به جای افزایش، به صورت معکوس شمارش می‌کنند. برای ایجاد یک شمارنده معکوس، آن را با استفاده از تابع reversed() نامگذاری کنید زمانی که آن را با counter-reset تنظیم می‌کنید.
شمارنده‌های معکوس با مقدار اولیه پیش‌فرض برابر با تعداد عناصر شروع می‌شوند، نه صفر. این به این معنی است که می‌توانند به سادگی از تعداد عناصر تا یک شمارش معکوس داشته باشند.
در ادامه نحوه استفاده از شمارنده‌های معکوس را نشان می‌دهیم:
<html>
<head>
<style>
body {
counter-reset: reversed(section);
}
p::before {
counter-increment: section -1;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<p>This is fourth paragraph</p>
<p>This is Third paragraph</p>
<p>This is second paragraph</p>
<p>This is first paragraph</p>
</body>
</html>در این مثال، ما از شمارنده معکوس به نام section استفاده کرده‌ایم. با استفاده از counter-reset، مقدار اولیه شمارنده معکوس را تنظیم کرده و سپس با counter-increment آن را به صورت معکوس کاهش می‌دهیم. با استفاده از مقدار counter(section)، شمارنده را در محتوای قبل از هر پاراگراف نمایش می‌دهیم. لازم به ذکر است که این ویژگی تنها توسط مرورگر Firefox پشتیبانی می‌شود.
Related Properties
در زیر لیستی از ویژگی‌های CSS مرتبط با شمارنده آورده شده است:
-
counter-reset:
- از آن برای ایجاد یا تنظیم مجدد یک شمارنده استفاده می‌شود.
-
counter-set:
- از آن برای تنظیم مقدار یک شمارنده به یک مقدار داده شده استفاده می‌شود.
-
counter-increment:
- برای افزایش مقدار شمارنده استفاده می‌شود.
-
counter():
- این ویژگی یک رشته را ارائه می‌دهد که نماینده مقدار فعلی شمارنده نامگذاری شده است.
-
counters():
- برای کار با شمارنده‌های تودرتو استفاده می‌شود.
-
@counter-styles:
- از آن برای ایجاد سبک‌های شمارنده سفارشی استفاده می‌شود.
-
contain:
- تعیین می‌کند که محتوای یک عنصر چگونه رفتار می‌کند زمانی که اندازه آن برای جا نشدن درون محتواش خارج از محیط‌اش است.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام