क्या एक सीएसएस "#id तत्व" पोते का चयन करता है?

Question

कहें कि मेरे पास <div id="container"> है जिसमें टेबल के साथ विभिन्न तत्व शामिल हैं। क्या सीएसएस चयनकर्ता #container table div के भीतर सभी टेबल (पोते, दादा-पोते, आदि सहित) का चयन करता है? या यह केवल बच्चों का चयन करता है?

इसके अलावा, अगर मैं कंटेनर div के भीतर पहला बच्चा div चुनना चाहता हूं, तो मैं यह कैसे करूँगा?

Answer 1

हां; इसे आसानी से रखने के लिए, #container के भीतर सभी table तत्वों का चयन करता है, भले ही घोंसले स्तर पर ध्यान दिए बिना।

अंतरिक्ष को descendant combinator कहा जाता है। टिन पर यह वास्तव में क्या कहता है, यह किसी भी वंशज का चयन करता है। इसमें बच्चों, पोते, आदि शामिल हैं, फिर भी घोंसले के स्तर पर ध्यान दिए बिना। यह न केवल बच्चों का चयन करता है; उस उद्देश्य को child combinator > द्वारा परोसा जाता है।

एक div के रूप में अपने कंटेनर के भीतर पहले बच्चे का चयन करने के लिए, आप

#container > div:first-child 

का उपयोग या आप पहले बच्चे के रूप में कुछ और ही है और आप पहले बच्चे प्रकार का है कि लेने के लिए चाहते हैं, तो div, आप का उपयोग

#container > div:first-of-type 

---

_{इस उद्देश्य के लिए, अक्सर इसे "प्रत्यक्ष बच्चों" का चयन करने के लिए कहा जाता है, और जहां लोग "बच्चे" कहते हैं, वे अक्सर "वंश" का अर्थ रखते हैं। कड़ाई से बोलते हुए, हालांकि, "बच्चे" तुरंत घोंसले के स्तर को संदर्भित करता है। "अप्रत्यक्ष बच्चे" जैसी कोई चीज़ नहीं है।}

Answer 2

#container table 

तालिका के सभी वंशजों का चयन करता है।

#container > table 

तालिका के सभी बच्चों का चयन करता है।

Answer 3

इसके अलावा, अगर मैं कंटेनर div के भीतर पहला बच्चा div चुनना चाहता हूं, तो मैं यह कैसे करूँगा?

#container > div{} 

Answer 4

#container table कोई फर्क नहीं पड़ता डोम पेड़ में कितना गहरा वे कर रहे हैं सभी table तत्वों कि #container तत्व में मौजूद हैं का चयन करेंगे। आप केवल प्रथम स्तर तत्वों लक्षित करना चाहते हैं, तो आप इस का उपयोग कर के बारे में जाना चाहते हैं: #container > table

कंटेनर तत्व के भीतर पहले बच्चे div का चयन करने के लिए, तुम क्या चाहते हैं निम्नलिखित: #container > div:first-child - यह केवल का चयन करेंगे प्रथम स्तर के बच्चे div। या, यदि आप कंटेनर के भीतर सभी पहले div तत्वों लक्षित करना चाहते हैं, तो आप #container div:first-child

प्रयोग करेंगे ही अगर div वास्तव में उस तत्व का पहला बच्चा है

<div id="container"> 
    <div>some content</div> 
</div> 

तो यह वैध है, उदाहरण के लिए इसके पहले कोई भी p टैग नहीं होना चाहिए (या कोई अन्य)।#container div:first-of-type