توابع counter() CSS

تعریف و استفاده

counter() این تابع مقدار فعلی شمارنده مشخص شده را به صورت رشته‌ای بازمی‌گرداند.

مثال

مثال 1

شمارنده برای صفحه ایجاد کنید (در انتخاب‌گر body). مقدار شمارنده را به هر علامت <h2> اضافه کنید و متن "بخش چندم" را در ابتدای هر علامت <h2> قرار دهید:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "بخش " counter(section) ": ";
}

آزمایش کنید

مثال 2

سبک شمارنده را تنظیم کنید:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "بخش " counter(section, upper-roman) ": ";
}

آزمایش کنید

زبان CSS

counter(countername, counterstyle)
مقدار توضیحات
countername

ضروری. نام شمارنده (مقدار counter-reset و counter-increment باید با نام‌های استفاده شده در آن‌ها مشابه باشند).

توجه داشته باشید که نام‌ها بزرگ‌کوچک‌نویسی حساس هستند.
counterstyle

اختیاری. سبک شمارنده‌ها (می‌تواند مقدار list-style-type باشد، نام @counter-style یا نمادهای function symbols()).

مقدار پیش‌فرض دهی است.

جزئیات فنی

نسخه: CSS3

پشتیبانی مرورگر

مرورگر کروم مرورگر ایدج مرورگر فایرفاکس مرورگر سافاری آپرا
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

صفحات مرتبط

آموزش:شمارنده CSS

منابع:ویژگی content CSS

منابع:ویژگی counter-increment CSS

منابع:ویژگی counter-reset CSS

منابع:قانون @counter-style CSS

منابع:توابع counters() CSS