एक HTML दस्तावेज़ की संरचना एक परिवार के पेड़ के समान है। आपके परिवार में, आपके माता-पिता और अन्य लोग हैं जो आपके सामने आए थे। ये आपके पूर्वजों हैं। बच्चे और जो पेड़ पर तुम्हारे पीछे आते हैं वे आपके वंशज हैं। एचटीएमएल एक समान फैशन में काम करता है। तत्व जो अन्य तत्वों के अंदर हैं उनके वंशज हैं। उदाहरण के लिए, चूंकि लगभग हर HTML तत्व के अंदर है
टैग, वे उस के वंशज होंगे तत्वों। यह संबंध समझना महत्वपूर्ण है जब आप सीएसएस के साथ काम करना शुरू करते हैं और दृश्य शैलियों को लागू करने के लिए विशिष्ट तत्वों को लक्षित करने की आवश्यकता होती है।सीएसएस descendant चयनकर्ताओं
एक सीएसएस वंशज चयनकर्ता उन तत्वों पर लागू होता है जो किसी अन्य तत्व के अंदर होते हैं (या अधिक सटीक रूप से कहा गया है, एक तत्व जो किसी अन्य तत्व के वंशज हैं)। उदाहरण के लिए, एक अनियंत्रित सूची में टैग के साथ टैग के रूप में टैग होता है। आइए निम्नलिखित HTML को उदाहरण के रूप में उपयोग करें:
- यह एक लिंक है
LI टैग के वंशज हैं यूएल टैग। ए टैग का वंशज है दोनों LI (बाल वंशज) और यूएल (पोते वंश) टैग। यदि आप परिवार के वृक्ष उदाहरण का उपयोग करके इस बारे में सोचने के बारे में सोचते हैं, तो
- माता पिता होगा,
- उस तत्व का बच्चा होगा, और उसका बच्चा होगा
- और के पोते
- .
- )। उस पृष्ठ पर मौजूद सभी अन्य लिंक जो सूची आइटम के वंशज नहीं हैं, उन्हें यह शैली नहीं मिलेगी।
याद रखने की एक महत्वपूर्ण बात यह है कि इससे कोई फर्क नहीं पड़ता कि टैग के बीच आप कितने टैग हैं जो आप अपने वंशज चयनकर्ता में उपयोग कर सकते हैं। यदि दूसरा तत्व पहले तत्व के भीतर कहीं भी संलग्न है तो इसे वंश के रूप में चुना जाएगा।
यदि आप उल तत्वों से निकले सभी एंकरों का चयन करना चाहते हैं, तो आप लिखेंगे:
उल एक {पाठ-सजावट: कोई नहीं; }
अब, ये शैलियों किसी भी लिंक पर लागू होंगी जो सूची आइटम के वंशज हैं। आप इस चयनकर्ता को भी लिख सकते हैं
उल ली एक {पाठ सजावट: कोई नहीं; }
यह एक वंशज चयनकर्ता है जो दो से अधिक प्रकार के चयनकर्ताओं का उपयोग करता है। इस मामले में, यह उन लिंक पर लागू होगा जो सूची-वस्तु के अंदर और एक अनियंत्रित सूची के अंदर भी हैं।
कक्षा चयनकर्ताओं और आईडी चयनकर्ताओं का उपयोग करना
जिन चयनकर्ताओं से आप उतर रहे हैं उन्हें हमेशा वंशजों का प्रकार नहीं होना चाहिए। उदाहरण के लिए, कल्पना करें कि आपके पास "बिलबोर्ड" की आईडी विशेषता के साथ साइट का एक क्षेत्र (एक विभाजन की तरह) था। आप उस आईडी के एक वंशज चयनकर्ता को स्थापित कर सकते हैं:
# बिलबोर्ड उल {पृष्ठभूमि-रंग: # सीसीसी; }
यह अनियंत्रित सूची तैयार करेगा जो "बिलबोर्ड" की आईडी वाले तत्व के वंशज हैं। आप वर्ग मूल्यों के लिए भी ऐसा ही कर सकते हैं।
div.billboard उल {पृष्ठभूमि रंग: # सीसीसी; }
यह मानता है कि विभाजन में "बिलबोर्ड" का वर्ग मूल्य है। ऊपर सीएसएस शैली होगी
- इस वर्ग मूल्य वाले किसी भी विभाजन के अंदर तत्व।
आप वास्तव में भारी चयनकर्ताओं के साथ भारी हाथ और वर्बोज़ प्राप्त कर सकते हैं। उदाहरण के लिए, यदि आप अपना एचटीएमएल कोड लिखने के लिए ड्रीमवेवर का उपयोग करते हैं, तो एक नया सेटिंग है जब आप नए सीएसएस नियम जोड़ते हैं जो कि उस पृष्ठ पर आपके कर्सर की नियुक्ति के आधार पर चयनकर्ता को स्वत: बना देगा। इस उदाहरण में ड्रीमवेवर क्या करता है वह जंगली वर्बोज़ और लंबा वंशज है। आपके सीएसएस के काम के लिए यह विशिष्टता आवश्यक नहीं है। आप जो करना चाहते हैं वह एक वंशज चयनकर्ता के बीच संतुलन ढूंढना है जो पर्याप्त विशिष्ट है ताकि आप उन सटीक तत्वों तक ड्रिल कर सकें जिन्हें आप चाहते हैं (बिना स्टाइल वाले जिन्हें आप प्रभावित नहीं करना चाहते हैं) सीएसएस नियमों के बिना जो चयनकर्ता हैं विशाल।
तो आप इन वंशजों के चयनकर्ताओं का उपयोग करके वेब पेज में विशिष्ट तत्वों को कैसे लक्षित करेंगे? सबसे पहले, आपको रिक्त स्थान से अलग दो (या अधिक) प्रकार चयनकर्ताओं का उपयोग करके वंशज चयनकर्ताओं को परिभाषित करना होगा।
ली एक {पाठ-सजावट: कोई नहीं; }
उस उदाहरण में, शैलियों केवल एक लिंक तत्व () पर लागू होती हैं जो सूची-वस्तु तत्व के वंशज हैं (
- )। उस पृष्ठ पर मौजूद सभी अन्य लिंक जो सूची आइटम के वंशज नहीं हैं, उन्हें यह शैली नहीं मिलेगी।
