HTML कोड वाली वेबसाइट का टेक्स्ट और सामग्री तैयार करना भवन का केवल एक 'हिस्सा' है एक वेबसाइट के सामने का छोर. इस प्रक्रिया का एक और बड़ा हिस्सा दृश्य शैली का निर्माण कर रहा है, जो किसके द्वारा नियंत्रित होता है सीएसएस के नियम.
जब भी हम एक नई वेबसाइट बनाते हैं या किसी मौजूदा में बड़े लेआउट परिवर्तन करते हैं, तो हम अनिवार्य रूप से चाहते हैं कि हमारी वेबसाइट के विशिष्ट हिस्से एक निश्चित तरीके से दिखें। ऐसा करने के लिए, यह समझना महत्वपूर्ण है कि विभिन्न का उपयोग कैसे करें सीएसएस संयोजक, जैसे कि CSS वंशज चयनकर्ता। यह CSS कॉम्बिनेटर वेबसाइट के बड़े वर्गों को एक ही बार में समान शैली परिवर्तन प्राप्त करने की अनुमति देता है।
CSS वंशज चयनकर्ता क्या है?
सीएसएस वंशज चयनकर्ता चार अलग-अलग सीएसएस संयोजकों में से एक है। दो चयनकर्ताओं के बीच एक स्थान ( ) जोड़ते समय, वही शैली तत्व दूसरे चयनकर्ता पर भी लागू होंगे, यह देखते हुए कि वंशज समान पहले चयनकर्ता को साझा करते हैं।
CSS वंशज चयनकर्ता को समझने के लिए, आपको सबसे पहले करने की आवश्यकता है सीएसएस चयनकर्ताओं को समझें. चयनकर्ता का वर्णन करने का सबसे अच्छा तरीका यह है कि यह एक CSS ऑपरेटर है जो HTML के उस हिस्से की पहचान करता है जिसे आप स्टाइल करने का प्रयास कर रहे हैं। इसे एक चयनकर्ता कहा जाता है क्योंकि यह "चयन" करता है कि HTML का जो भी बिट सीएसएस माता-पिता के समान ऑपरेटर साझा करता है।
ऐसे ऑपरेटरों के सामान्य उदाहरण हैं:
डिव
यह एक टैग है जो HTML के एक सेक्शन को परिभाषित करता है, जिसमें पैराग्राफ और सामग्री जैसी चीजें शामिल हो सकती हैं, या:
ली
जो एक आदेशित सूची है। इसी तरह का एक और टैग है:
यूएल
यह एक अनियंत्रित सूची बनाता है। अधिक जटिल पैटर्न को चयनकर्ता भी कहा जाता है। सीधे शब्दों में कहें, एक सीएसएस वंशज चयनकर्ता एक वेबसाइट को बताता है कि जब एक चयनकर्ता एक सामान्य पूर्वज के नीचे 'नेस्टेड' होता है तो कैसा दिखना चाहिए।
पहला चयनकर्ता CSS पैरेंट या 'पूर्वज' चयनकर्ता बन जाता है, और दूसरा चयनकर्ता वंशज बन जाता है। इस बारे में सोचें कि फ़ाइल निर्देशिका कैसे काम करती है: सीएसएस पैरेंट एक फ़ोल्डर की तरह है जिसमें अन्य फ़ोल्डर्स होते हैं, जिसमें स्वयं के फ़ोल्डर्स हो सकते हैं।
चार कॉम्बिनेटरों में से, केवल एक ही वह सब कुछ चुनता है जो एक विशिष्ट सीएसएस माता-पिता के नीचे निहित है, वह है सीएसएस वंशज चयनकर्ता। तीन अन्य संयोजक हैं।
- चाइल्ड सिलेक्टर (एकल स्पेस के बजाय '>') केवल कॉम्बिनेटर में पहले सिलेक्टर द्वारा संदर्भित तत्वों का चयन करता है। यदि पहला चयनकर्ता (div) है और दूसरा चयनकर्ता (p) है, तो केवल (p) का चयन तब तक किया जाता है जब तक उसके पास (div) पूर्वज है। यदि एक अनुच्छेद एक नए (अनुभाग) के तहत बनाया गया है, भले ही वह उसी (div) में हो, तो शैली के नियमों को नहीं रखा जाता है।
- आसन्न भाई चयनकर्ता (एकल स्थान के बजाय '+') केवल उस तत्व का चयन करता है जो संयोजक में दूसरे चयनकर्ता के सबसे करीब है। यदि पहला चयनकर्ता (div) है और दूसरा चयनकर्ता (p) है, तो पहला तत्व जो (p) का उपयोग करता है लेकिन नहीं (div) का चयन किया जाता है।
- सामान्य सहोदर चयनकर्ता (एकल स्थान के बजाय '~') दूसरे चयनकर्ता द्वारा निर्दिष्ट तत्वों को छोड़कर प्रत्येक तत्व का चयन करता है। यदि पहला चयनकर्ता (div) है और दूसरा चयनकर्ता (p) है, तो प्रत्येक अवयव जो नहीं है (p) का चयन किया जाता है।
CSS वंशज चयनकर्ता कैसा दिखता है?
दो अलग-अलग सीएसएस वंशज चयनकर्ताओं के साथ-साथ संचालन के निम्नलिखित उदाहरण में, (div) है पहले संयोजक में पहला चयनकर्ता, जबकि (उल) दूसरे में पहला चयनकर्ता है संयोजक दोनों सीएसएस वंशज चयनकर्ताओं में, (पी) दूसरे चयनकर्ता के रूप में प्रयोग किया जाता है।
शैली तत्व (div) और (ul) के बीच भिन्न होते हैं, लेकिन (p) दोनों उदाहरणों में अपने CSS माता-पिता के लक्षणों को स्पष्ट रूप से वहन करता है।
CSS वंशज चयनकर्ता का उपयोग क्यों करें?
CSS वंशज चयनकर्ता के महत्व को समझने के लिए, पहले CSS नेस्टेड चयनकर्ताओं को समझना महत्वपूर्ण है।
हम आम तौर पर चाहते हैं कि कुछ स्टाइल नियम सभी वेबसाइट पर लागू हों, जैसे कि विशिष्ट आकार या फ़ॉन्ट जो सभी पैराग्राफ (पी) टेक्स्ट डिफ़ॉल्ट रूप से उपयोग करता है। इसी तरह, यदि पूरी वेबसाइट के बजाय प्रत्येक व्यक्तिगत पैराग्राफ के लिए उन शैली नियमों को लागू किया जाता है, तो HTML गड़बड़ दिखना शुरू हो सकता है।
नेस्टेड सीएसएस सीएसएस कॉम्बिनेटर जैसे सीएसएस वंशज चयनकर्ता के उपयोग के माध्यम से संभव है। माता-पिता चयनकर्ता के नीचे "घोंसले" सीएसएस द्वारा, किसी वेबसाइट को जल्दी और कुशलता से बताना संभव है सीएसएस माता-पिता को संदर्भित प्रत्येक परिदृश्य में एक विशिष्ट चयनकर्ता को कैसा दिखना चाहिए।
एक नेस्टेड CSS चयनकर्ता का उपयोग करने से हम एक ही समय में साइट के कई अनुभागों को स्टाइल करने के लिए समान नियम लागू कर सकते हैं, जिससे हम अपने HTML को साफ और प्राचीन रखते हुए कम काम कर सकते हैं।