CSS-এ চাইল্ড সিলেক্টর

ধরা যাক আমাদের নিম্নলিখিত কোড আছে:

<p>
	text <b><i>bold italic</i></b>
</p>
<p>
	text <i>just italic</i>
</p>

ধরা যাক আমরা i ট্যাগগুলো নির্বাচন করতে চাই, যেগুলো প্যারাগ্রাফের বংশধর। এটা করা যাক:

p i {
	color: red;
}

কোড 실행ের ফলাফল:

এখন আসুন সেই i ট্যাগগুলো নির্বাচন করি, যেগুলো আমাদের প্যারাগ্রাফের সরাসরি বংশধর। এক্ষেত্রে চাইল্ড সিলেক্টর > আমাদের সাহায্য করবে।

এটি কীভাবে ব্যবহার করতে হয় তা বুঝতে, আসুন এটির সাথে ডিসেন্ডেন্ট সিলেক্টরের তুলনা করি। এভাবে: p i - আমরা প্যারাগ্রাফের ভিতরের সব ইটালিক নির্বাচন করব, আর এভাবে: p > i - শুধুমাত্র সেই ইটালিকগুলো, যেগুলো প্যারাগ্রাফের সরাসরি বংশধর।

আসুন এই সিলেক্টরটি আমাদের HTML কোডে প্রয়োগ করি:

p > i {
	color: red;
}

কোড 실행ের ফলাফল:

নিম্নলিখিত কোড দেওয়া আছে:

<ul>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
</ul>

শুধুমাত্র সেই b ট্যাগগুলোকে লাল রঙ করুন, যেগুলো li ট্যাগগুলোর সরাসরি বংশধর।