CSS-এ বংশধর সিলেক্টর

ধরুন আমাদের একটি ul তালিকা এবং একটি ol তালিকা আছে:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

আসুন এই তালিকাগুলির li ট্যাগগুলিকে লাল রঙে রাঙাই:

li {
	color: red;
}

এখন ধরুন আমরা ul তালিকার li ট্যাগগুলি লাল রঙে রাঙাতে চাই, এবং ol তালিকার li ট্যাগগুলি - সবুজ রঙে।

এই ক্ষেত্রে বংশধর সিলেক্টর আমাদের সাহায্য করবে। এটি তাদের প্যারেন্ট অনুসারে ট্যাগ নির্বাচন করতে দেয়। এর জন্য প্যারেন্টের সিলেক্টর নির্দিষ্ট করতে হবে, এবং একটি স্পেস দিয়ে - বংশধরের সিলেক্টর। আমাদের ক্ষেত্রে ul li সিলেক্টরটি ul তালিকা থেকে সমস্ত li ট্যাগ নির্বাচন করবে, এবং ol li সিলেক্টরটি - ol তালিকা থেকে সমস্ত li ট্যাগ নির্বাচন করবে। আসুন সেগুলিকে প্রয়োজনীয় রঙে রাঙাই:

ul li {
	color: red;
}
ol li {
	color: green;
}

বংশধর সিলেক্টর অগত্যা ট্যাগ সিলেক্টর নিয়ে গঠিত হতে হবে না - সেখানে যেকোনো সংখ্যক থাকতে পারে, একটি স্পেস দিয়ে লেখা। নিম্নলিখিত কোডে, উদাহরণস্বরূপ, সমস্ত i ট্যাগ নির্বাচন করা হয়, যা li ট্যাগের ভিতরে অবস্থিত, যারা আবার ul ট্যাগের ভিতরে অবস্থিত:

ul li i {
	color: red;
}

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

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

ul ট্যাগ থেকে ইটালিককে লাল রঙে রাঙান, এবং সবুজ রঙে - p ট্যাগ থেকে ইটালিককে।

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

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

b ট্যাগের ভিতরে থাকা ইটালিককে লাল রঙে রাঙান, যা আবার p ট্যাগের ভিতরে অবস্থিত।