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

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

সিনট্যাক্স

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

মানগুলি

মান	বর্ণনা
নাম	কাউন্টারের নাম। একটি সাধারণ শব্দ (ক্লাস বা আইডির নামের মতো)। একাধিক নাম নির্ধারণ করা যেতে পারে, সেগুলিকে স্পেস দিয়ে আলাদা করে। এই ক্ষেত্রে একই সাথে একাধিক কাউন্টার পরিবর্তিত হবে।
ইনক্রিমেন্ট	পূর্ণসংখ্যা ধনাত্মক বা ঋণাত্মক সংখ্যা। ঐচ্ছিক প্যারামিটার।
`none`	বর্তমান সিলেক্টরের জন্য কাউন্টার বৃদ্ধি নিষিদ্ধ করে।

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

উদাহরণ

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

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

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

উদাহরণ

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

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

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

উদাহরণ

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

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

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

উদাহরণ

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

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

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

উদাহরণ

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

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

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

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

আরও দেখুন

বৈশিষ্ট্য counter-reset,
যা কাউন্টারের মান শূন্যে রিসেট করে