तालिका संरचनाओं में बाल चयनकर्ता बनाम वंशज चयनकर्ता

HTML दस्तावेज़ों में तत्वों का चयन करते समय, डेवलपर्स अक्सर लक्ष्य करने के लिए बाल चयनकर्ता (>) का उपयोग करते हैं किसी भी नेस्टेड तत्व को लक्षित करने के लिए बच्चों और वंशज चयनकर्ताओं को निर्देशित करें। हालाँकि, ऐसे परिदृश्य हैं जहाँ चाइल्ड चयनकर्ता अप्रत्याशित रूप से विफल होता प्रतीत होता है।

निम्न उदाहरण पर विचार करें:

table tr td {
  background-color: red;
}

table > tr > td {
  background-color: blue;
}

पहला नियम

तत्वों के भीतर तत्वों के भीतर सभी का बच्चा है , जो बदले में

तत्वों का सफलतापूर्वक चयन करता है। हालाँकि, दूसरा नियम, जो चाइल्ड चयनकर्ता (>) का उपयोग करता है, किसी भी	तत्व को स्टाइल करने में विफल रहता है। इस व्यवहार से हैरान होकर, डेवलपर्स मान सकते हैं कि चूंकि

का एक बच्चा है, बच्चे के चयनकर्ता को लागू करना चाहिए।

HTML में एक

तत्व के अंतर्निहित समावेशन से भ्रम पैदा होता है। डिफ़ॉल्ट रूप से, ब्राउज़र तत्वों को शामिल करने के लिए एक तत्व सम्मिलित करते हैं। परिणामस्वरूप, वास्तविक तत्व संरचना बन जाती है:

इस संशोधित संरचना में,

अब का प्रत्यक्ष बच्चा नहीं है, बल्कि का बच्चा है, जो स्वयं का बच्चा है। इसलिए, > चयनकर्ता का निकटतम बच्चा नहीं है।

इस समस्या को ठीक करने के लिए, डेवलपर्स को स्पष्ट रूप से tbody तत्व का चयन करना होगा:

table > tbody > tr > td {
  background-color: blue;
}

यह सुनिश्चित करता है कि चाइल्ड चयनकर्ता संशोधित संरचना में सही तत्व को लक्षित करता है। इसके अतिरिक्त, यदि HTML दस्तावेज़ में कोई तत्व स्पष्ट रूप से जोड़ा जाता है, तो उसी चयनकर्ता का उपयोग किया जा सकता है।

को लक्षित नहीं कर सकता क्योंकि यह