شمارشگر

تاحالا شده مطلب آموزشی رو بخواهید در وبسایت قرار بدید و کلی لیست هم باید وارد میکردید و این لیست ها علاوه بر عدد یک توضیح هم داشت مثلا مرحله 1 ، مرحله 2 ، گام 1 ، گام 2 و غیره این کار رو میشه به صورت خود کار به متن اضافه کرد کد های css رو پایین می بینید.

شمارشگرها در Css

درج شماره های خودکار با شمارشگر Css

شمارشگر Css مثل یک متغییر عمل می کند. مقدار متغییر می تواند توسط قوانید Css اضافه شود.

پارامتر های زیر را می توانیم در هنگام استفاده از شمارشگر Css بکارببریم.

counter-reset: یک شمارشگر ایجاد یا شمارشگر موجود را ریست می کند.

counter-increment: مقدار شمارشگر را افزایش می دهد.

content: محتوای ساخته شده را درج می کند.

()counter: یا ()counters عملگر : عدد یک شمارشگر را به یک المان می دهد.

برای استفاده از شمارشگر CSS ، باید ابتدابه وسیله counter-reset ایجاد شود.

مثال زیر یک شمارشگر برای صفحه ایجاد میکند. و سپس به ازای هر تگ H2 به عدد شمارشگر یکی اضافه می کند. و عبارت Section را به قبل از هر تگ H2 نسبت می دهد.

body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

مشاهده نتیجه

شمارشگر تو در تو

در مثال پیشرو ما یک شمارشگر برای صفحه ایجاد خواهیم کرد. و یک شمارشگر برای هر تگ H1 (زیر مجموعه )

مجموعه به ازای هر تگ H1 شمارش را انجام خواهد داد . و زیر مجموعه به ازای ار تگ H2 یک شمارش انجام خواهد داد باهم این مثال را ببینم

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}