বাচ্চা সিলেক্টরে নবিশদের ভুল

নিচের সিলেক্টরটি দেখুন:

p.eee {
	color: red;
}

আপনি ইতিমধ্যে জানেন যে, এই সিলেক্টরটি eee ক্লাস সহ প্যারাগ্রাফ নির্বাচন করবে। উদাহরণস্বরূপ, এইগুলি:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

এখন এই সিলেক্টরটি দেখুন:

p .eee {
	color: green;
}

এটি পূর্ববর্তী সিলেক্টর থেকে আলাদা, কারণ এখানে ট্যাগ নাম এবং ক্লাস নামের মধ্যে একটি স্পেস আছে। এই স্পেসটি ডিসেন্ডেন্ট সিলেক্টর প্রতিনিধিত্ব করে। অর্থাৎ এই ক্ষেত্রে আমরা eee ক্লাস সহ সমস্ত এলিমেন্ট নির্বাচন করছি, যেগুলি প্যারাগ্রাফের ভিতরে অবস্থিত। উদাহরণস্বরূপ, এই সিলেক্টরটি নিম্নলিখিত স্প্যানগুলি নির্বাচন করবে:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

কোড এক্সিকিউট করার ফলাফল:

সুতরাং, আরেকবার: p.eee - এই ধরনের সিলেক্টর eee ক্লাস সহ প্যারাগ্রাফ নির্বাচন করে। কিন্তু যদি আমি এভাবে লিখি: p .eee, তাহলে eee ক্লাস সহ সমস্ত এলিমেন্ট নির্বাচন করব, যা প্যারাগ্রাফের ভিতরে অবস্থিত। এই পার্থক্যটি অনুভব করুন।

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

p.bbb {
	color: red;
}

p .bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee p .bbb {
	color: red;
}