বৈশিষ্ট্য counter-increment

বৈশিষ্ট্য counter-increment নির্ধারণ করে উপাদানগুলির স্বয়ংক্রিয় সংখ্যায়ন, উদাহরণস্বরূপ, অনুচ্ছেদ বা শিরোনাম। এটি ব্যবহার করা হয় যৌথভাবে বৈশিষ্ট্য counter-reset, সিউডো-এলিমেন্ট after এবং before, বৈশিষ্ট্য content, যার ভিতরে ব্যবহার করা হয় ফাংশন counter। 更好的理解ের জন্য আমি উদাহরণগুলি দেখার পরামর্শ দিই।

সিনট্যাক্স

cssসিলেক্টর {
  counter-increment: নাম [ইনক্রিমেন্ট] | none;
}

মানগুলি

ডিফল্ট মান: none।

উদাহরণ

আসুন অনুচ্ছেদগুলি স্বয়ংক্রিয়ভাবে সংখ্যাযুক্ত করা যাক:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

উদাহরণ

ধরুন সংখ্যায়নের পাশাপাশি আরও কিছু টেক্সট যোগ করা হয়। আমাদের ক্ষেত্রে № সংখ্যার আগে এবং পরে একটি বিন্দু:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

উদাহরণ

আসুন সংখ্যায়ন 10 থেকে শুরু করি। এর জন্য কাউন্টারের প্রাথমিক মান আমরা নয় রাখি, অর্থাৎ আমাদের প্রয়োজন থেকে 1 কম:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

উদাহরণ

ধরুন এখন সংখ্যায়ন "2" ইনক্রিমেন্টে হয়। এর জন্য ইনক্রিমেন্ট হিসেবে আমরা দুই রাখি:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* আমরা দুই রাখি */
  content: "№" counter(test) ".";
}

Результат:

উদাহরণ

আগের উদাহরণে সংখ্যায়ন দুই থেকে শুরু হয়েছিল, আর আমরা চাইতাম এক থেকে। কেন এটা ঘটল? কারণ counter-reset কাউন্টারের মান শূন্যে রিসেট করে, এবং তারপর counter-increment তার ইনক্রিমেন্ট যোগ করে: ডিফল্টভাবে এক, তাই আগে আমাদের সংখ্যায়ন 1 থেকে শুরু হত। আর এখন দুই যোগ হয় - এবং সংখ্যায়ন শুরু হয় দুই থেকে।

সমস্যা সমাধানের জন্য আমরা প্রাথমিক কাউন্টার মান -1 এ রাখি এবং এখন সংখ্যায়ন 1 থেকে শুরু হবে এবং 2 করে বৃদ্ধি পাবে:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

আরও দেখুন