X

X

X

CSS Counters । কাউন্টার


CSS counter হচ্ছে কিছু “variable” যেগুলোকে CSS নিয়ন্ত্রন করা যায়। এদের মান CSS rule ব্যবহার করে বৃদ্ধি করা যায়। কাউন্টার ব্যবহার করে, কন্টেন্টের অবস্থান নির্ধারণ বা পরিবর্তন করা যায়।


স্বয়ংক্রিয়ভাবে কাউন্টার দিয়ে সংখ্যামান যুক্তকরণ

CSS counter ব্যবহার করার জন্য নিচের প্রপার্টিগুলো ব্যবহার করতে হবে:

  • counter-reset – counter তৈরি বা ধ্বংস করার জন্য ব্যবহৃত হয়।
  • counter-increment – counter value-এর মান বৃদ্ধি করার জন্য ব্যবহৃত হয়।
  • content – তৈরিকৃত কন্টেন্ট উপস্থাপণ বা যুক্ত করার জন্য ব্যবহৃত হয়।
  • counter() অথবা counters() function – ব্যবহার করে কোনো ইলামেন্টে ডাটা যুক্ত করা হয়।

CSS counter ব্যবহার করার জন্য প্রথমে অবশ্যই counter-reset ব্যবহার করতে হবে।

নিচের উদাহরণে একটি কাউন্টার তৈরি করা হলো, এর মান body ইলামেন্টে সংরক্ষণ করা হলো। তারপর সব <h2> এর এই মান ক্রমান্বয়ে যুক্ত করা হলো।

Code Example

body {
    counter-reset: section;
}

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


কাউন্টারের ভেতরে কাউন্টার (Nesting Counter)

নিচের উদাহরণে page (section) এর জন্য একটি কাউন্টার এবং প্রতিটি <h1> element (subsection) এর জন্য আরেকটি কাউন্টার তৈরি করা হলো।

Code Example

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) " ";
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

কাউন্টার ব্যবহার করে খুব সহজে আউটলাউন্ড লিস্ট তৈরি করা যায়, কারণ চাইল্ড ইলামেন্টে স্বয়ংক্রিয়ভাবে একটি কাউন্টার instance তৈরি হয়। এখানে counters() function ব্যবহার করে বিভিন্ন নেস্টেড কাউন্টারে স্ট্রিং যুক্ত করে দেখানো হলো:

Code Example

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


 CSS Counter Property সমূহ

Property বর্ণনা
content ::before এবং ::after pseudo-element এর সাথে generated content যুক্ত করার জন্য ব্যবহৃত হয়।
counter-increment এক বা একাধিক কাউন্টার ভেরিয়েবলের মান বৃদ্ধি করার জন্য ব্যবহৃত হয়।
counter-reset এক বা একাধিক কাউন্টার তৈরি বা রিসেট করার জন্য ব্যবহৃত হয়।