CSS কাউন্টার

পিজা

হ্যামবার্গার

হটডগ

CSS কাউন্টার CSS-এর দ্বারা সংরক্ষিত "বদল" হিসাবে মনে করা হয়, যার মান CSS ক্রিয়াকরণ দ্বারা বৃদ্ধি করা যায় (তাদের ব্যবহার সংখ্যা ট্র্যাক করা হয়)。

কাউন্টার ফাংশন দ্বারা আপনি নথিভূক্ত স্থানের ভিত্তিতে তার আবর্জনা পরিবর্তন করতে পারেন。

কাউন্টার সহযোগী স্বত্বকীয় নম্বর

CSS কাউন্টার "বদল" হিসাবে মনে করা হয়। বদলের মান ক্রিয়াকরণ দ্বারা বৃদ্ধি করা যায় (তাদের ব্যবহার সংখ্যা ট্র্যাক করা হয়)。

CSS কাউন্টার ব্যবহার করতে, আমরা নিম্নলিখিত এটা ব্যবহার করবো:

  • counter-reset - কাউন্টার তৈরি করুন বা পুনরায় সংযোজন করুন
  • counter-increment - কাউন্টার মান বৃদ্ধি করুন
  • content - তৈরি হওয়ার মূল্য যুক্ত করুন
  • counter() বা counters() ফাংশন - কাউন্টারের মান ইলিমেন্টে যোগ করুন

CSS কাউন্টার ব্যবহার করতে, প্রথমে ব্যবহার করতে হবে counter-reset তা তৈরি করুন

নিম্নলিখিত উদাহরণটি পৃষ্ঠা (বড় চিহ্নিত সাংকেতিক কাউন্টার) একটি কাউন্টার তৈরি করে, এবং প্রত্যেক <h2> ইলিমেন্টের জন্য কাউন্টার মান বৃদ্ধি করে, এবং প্রত্যেক <h2> ইলিমেন্টের শুরুতে "Section <value of the counter>:" সাংকেতিক কাউন্টার যুক্ত করে:

একটি উদাহরণ

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

স্বয়ংক্রিয়ভাবে পরীক্ষা করুন

নিহিত কাউন্টার

নিম্নলিখিত উদাহরণটি পৃষ্ঠা (section) একটি কাউন্টার তৈরি করে, প্রত্যেক <h1> ইলিমেন্ট (subsection) হতে একটি কাউন্টার তৈরি করে。

"section" কাউন্টার প্রত্যেক <h1> ইলিমেন্ট হতে কাউন্ট করে, এবং "Section" এবং section কাউন্টারের মান লিখে, "subsection" কাউন্টার প্রত্যেক <h2> ইলিমেন্ট হতে কাউন্ট করে, section কাউন্টারের মান এবং subsection কাউন্টারের মান লিখে:

একটি উদাহরণ

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

স্বয়ংক্রিয়ভাবে পরীক্ষা করুন

কাউন্টার ক্রিয়াকরণ লিস্ট উপস্থাপনার জন্যও খুবই উপযুক্ত, কারণ সাব-এলিমেন্টেটে স্বয়ংক্রিয়ভাবে একটি কাউন্টার ইনস্ট্যান্স তৈরি হয়। এখানে আমরা ব্যবহার করি counters() ফাংশন বিভিন্ন স্তরের এক্সট্রান্সফর্মের মধ্যে একটি স্ট্রিং প্রবর্তন করে:

একটি উদাহরণ

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

স্বয়ংক্রিয়ভাবে পরীক্ষা করুন

CSS কাউন্টার প্রতিযোগী

প্রতিযোগী বর্ণনা
content প্রোজেক্টিং কনটেন্ট যুক্ত করতে ::before এবং ::after সুপারইটিমেন্স ব্যবহার করুন。
counter-increment একটি বা একাধিক কাউন্টার মান বাড়ানো
counter-reset একটি বা একাধিক কাউন্টার তৈরি বা পুনরুদ্ধার করুন。