পসিউডোক্লাস nth-child

পসিউডোক্লাস nth-child একটি এলিমেন্ট সিলেক্ট করে, যা প্যারেন্টের n-তম চাইল্ড।

সিনট্যাক্স

সিলেক্টর:nth-child(সংখ্যা | odd | even | এক্সপ্রেশন) {
	
}

মান

মান	বর্ণনা
সংখ্যা	`1` থেকে শুরু করে ধনাত্মক সংখ্যা। যে এলিমেন্টের সংখ্যা আমরা অ্যাক্সেস করতে চাই তা নির্দিষ্ট করে। এলিমেন্টের নাম্বারিং `1` থেকে শুরু হয়।
`odd`	বিজোড় এলিমেন্ট।
`even`	জোড় এলিমেন্ট।
এক্সপ্রেশন	আপনি n অক্ষর দিয়ে বিশেষ এক্সপ্রেশন তৈরি করতে পারেন, যা শূন্য (এক থেকে নয়) থেকে অসীম পর্যন্ত সমস্ত পূর্ণসংখ্যা নির্দেশ করে। সুতরাং, `2n` - মানে সব জোড় সংখ্যা (দ্বিতীয় থেকে শুরু করে)। এটি কিভাবে বুঝবেন? আমরা `n`-এ `0` থেকে ক্রমান্বয়ে সংখ্যাগুলি প্রতিস্থাপন করি: যদি n = 0, তাহলে 2n দেবে 0 - এমন কোন এলিমেন্ট নেই (এলিমেন্ট নাম্বারিং 1 থেকে), যদি n = 1, তাহলে 2n দেবে 2 - দ্বিতীয় এলিমেন্ট, যদি n = 2, 2n দেবে 4 - চতুর্থ এলিমেন্ট। আপনি যদি 3n লিখেন - এটি হবে প্রতি তৃতীয় এলিমেন্ট (তৃতীয় থেকে শুরু করে), এবং তাই।

উদাহরণ

এই উদাহরণে, আমরা সেই li-টিকে লাল রঙ করব যেটি তার প্যারেন্টের 4-তম চাইল্ড:

<ul>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
</ul>

li:nth-child(4) {
	color: red;
}

উদাহরণ

এখন আমরা সমস্ত জোড় li-কে লাল করব:

<ul>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
</ul>

li:nth-child(even) {
	color: red;
}

উদাহরণ

এখন আমরা সমস্ত বিজোড় li-কে লাল করব:

<ul>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
</ul>

li:nth-child(odd) {
	color: red;
}

উদাহরণ

এখন আমরা প্রতি তৃতীয় li-কে লাল করব (তৃতীয় থেকে শুরু করে):

<ul>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>ল스트 আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
</ul>

li:nth-child(3n) {
	color: red;
}

উদাহরণ

সিলেক্টরে আপনি এলিমেন্টের একটি রেঞ্জ নির্দিষ্ট করতে পারেন। ধরুন, আপনার 20টি এলিমেন্টের একটি তালিকা আছে এবং আপনাকে 7 থেকে 14 পর্যন্ত এলিমেন্টগুলি বেছে নিতে হবে। এটি এভাবে করা যেতে পারে:

<ol>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
	<li>লিস্ট আইটেম</li>
</ol>

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}