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

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

cssp.eee {
  color: red;
}

आपको पहले से पता होना चाहिए कि ऐसा चयनकर्ता eee क्लास वाले पैराग्राफ को चुनेगा। उदाहरण के लिए, ये वाले:

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

अब इस चयनकर्ता को देखें:

cssp .eee {
  color: green;
}

यह चयनकर्ता पिछले वाले से इस मायने में अलग है, कि इसमें टैग नाम और क्लास नाम के बीच एक स्पेस है। यह स्पेस वंशज चयनकर्ता को दर्शाता है। यानी इस मामले में हम ऐसे सभी एलिमेंट्स को चुन रहे हैं जिनका क्लास eee है, और जो पैराग्राफ के अंदर स्थित हैं। उदाहरण के लिए, यह चयनकर्ता निम्नलिखित स्पैन को चुनेगा:

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

कोड निष्पादन का परिणाम:

cssp.bbb {
  color: red;
}

cssp .bbb {
  color: red;
}

css.eee p.bbb {
  color: red;
}

css.eee p .bbb {
  color: red;
}