CSS-এ বংশধর সিলেক্টর এবং ক্লাসের জটিল সংমিশ্রণ

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

<div class="block">
	<h2 class="header">Title h2</h2>
	<p>
		text
	</p>
	
	<h3 class="header">Title h3</h3>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div class="block">
	<h2 class="header">Title h2</h2>
	<p>
		text
	</p>
	
	<h3 class="header">Title h3</h3>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

আসুন block ক্লাস সহ এলিমেন্টের ভিতরে থাকা সমস্ত header ক্লাস সহ এলিমেন্ট খুঁজে বের করি, এবং তাদের Arial ফন্ট সেট করি:

.block .header {
	font-family: Arial;
}

HTML কোডে দেখা যাচ্ছে, block ক্লাস সহ এলিমেন্টের ভিতরে header ক্লাস সহ এলিমেন্টগুলি h2 হেডার এবং h3 হেডার উভয়ই হতে পারে। আসুন এই হেডারগুলি আলাদা করে এমন সিলেক্টর লিখি এবং এই হেডারগুলির সাথে কিছু করি।

আসুন block ক্লাস সহ এলিমেন্টের ভিতরে থাকা সমস্ত h2 হেডার যাদের header ক্লাস আছে, তাদের নির্বাচন করি:

.block h2.header {
	font-size: 30px;
	color: red;
}

এবং এখন block ক্লাস সহ এলিমেন্টের ভিতরে থাকা সমস্ত h3 হেডার যাদের header ক্লাস আছে, তাদের নির্বাচন করি:

.block h3.header {
	font-size: 20px;
	color: green;
}

আসুন আমাদের সমস্ত CSS একত্রিত করি:

.block .header {
	font-family: Arial;
}
.block h2.header {
	font-size: 30px;
	color: red;
}
.block h3.header {
	font-size: 20px;
	color: green;
}

এটিকে আমাদের HTML কোডে প্রয়োগ করি:

নীচের দেওয়া কোডে সিলেক্টরটি কী নির্বাচন করে তা বলুন। তারপর এই সিলেক্টরের জন্য উপযুক্ত HTML কোড লিখুন। সিলেক্টর সহ কোডটি এখানে দেওয়া হল:

.eee .bbb {
	color: red;
}

.eee h2 {
	color: red;
}

.eee h2.bbb {
	color: red;
}

.eee h3.bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee .bbb .kkk {
	color: red;
}