शुरुआती लोगों की वंशज चयनकर्ता में गलती

निम्नलिखित चयनकर्ता को देखें:

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;
}