📘 🙍🏽 🖐🏾 जेनेरिक संबंधित तत्व चयनकर्ता ⛓️ 🎆 😗

अगले कुछ पैराग्राफ में, मैं सामान्यीकृत संबंधित तत्वों (या ~) के चयनकर्ता और इसके संभावित अनुप्रयोग के दायरे को और अधिक विस्तार से जांचना चाहता हूं।
उनके बारे में जानकारी की वर्तनी ने मुझे इस लेख को लिखने के लिए प्रेरित किया।

यह क्या है

सामान्यीकृत संबंधित तत्वों के चयनकर्ता का मुख्य कार्य दिए गए तत्व के बाद आने वाले तत्व (एस) का चयन करना है और इसके साथ एक आम माता-पिता का होना है।
इसे निम्नानुसार नामित किया गया है:
ए ~ बी {शैली} , जहां ए और बी स्ट्रिंग मान हैं जो चयनकर्ता को परिभाषित करते हैं। शैली - लागू गुण।
उदाहरण
HTML:

<article> <h1></h1> <h2> 1</h2> <p>   </p> <h2> 2</h2> <span> ,   span</span> </article>

सीएसएस:

 h1~h2 { color:red; }

नतीजतन, एच 2 हेडिंग लाल हो जाएंगे; हेडिंग एच 1 के साथ उनके पास एक सामान्य अभिभावक है, और कोड में वे इसके बाद खड़े होते हैं।

डेमो ।

यदि तत्व मूल से अधिक है, तो इसका चयन नहीं किया जाएगा।

यह याद किया जाना चाहिए कि केवल उन तत्वों को जिनके पास स्रोत के साथ एक सामान्य माता-पिता हैं उन्हें चुना गया है, न कि उन लोगों के पास जो सामान्य पूर्वज हैं। यह दूसरे उदाहरण द्वारा अच्छी तरह से चित्रित किया गया है।

उदाहरण

HTML:

 <article> <h1></h1> <h2> 1</h2> <p>   </p> <h2> 2</h2> <p>     <span> ,   span,    </span> </p> </article>

सीएसएस:

 h1~span { color:red; }

डेमो ।

नतीजतन, लाल रंग में कुछ भी हाइलाइट नहीं किया जाता है, क्योंकि स्पान का जनक p है, और h1 लेख है।
लाल होने की अवधि के लिए, आपको या तो इसे h1 के पैराग्राफ से एक स्तर से निकालना होगा, या यह करना चाहिए:

सीएसएस:

 h1~p span { color:red; }

डेमो ।

के साथ प्रयोग करें: मंडराना

मेरी राय में, चयनकर्ता "ए ~ बी" तत्वों की घटनाओं के साथ संयोजन में अपनी सारी उपयोगिता दिखाता है जैसे: हॉवर, फोकस: आदि।
यदि पहले यह किसी तत्व की शैली को बदलना संभव था, जब आप उस पर मंडराते हैं, तो सामान्यीकृत संबंधित तत्वों के चयनकर्ता का उपयोग करने से आप उस तत्व की शैली को बदल सकते हैं, जिस पर घटना हुई थी।

प्रतीकात्मक रूप से (होवर के मामले में), ऐसा दिखता है:
ए: होवर ~ बी {शैली} , जहां ए वह तत्व है जो माउस खत्म हो गया है, और नए शैली नियम बी पर लागू होते हैं ।

उदाहरण

HTML:

 <body> <span>        </span> <div> №1</div> <div> №2</div> </body>

सीएसएस:

 div{ width:100px; height:50px; margin:5px; background:gray; } span:hover~div{ background:green; }

डेमो ।

परिणामस्वरूप, शिलालेख के ऊपर मंडराने पर ब्लॉक हरे हो जाएंगे।

अब चलते हैं और तत्वों को विभिन्न वर्गों को असाइन करते हैं।
उदाहरण

HTML:

 <body> <span class="span1">  №2   </span> <br/> <span class="span2">  №1   </span> <div class="block1"> №1</div> <div class="block2"> №2</div> </body>

 CSS: span{ cursor:pointer; } div{ width:100px; height:50px; margin:5px; background:gray; } .span1:hover~.block2{ background:green; } .span2:hover~.block1{ background:blue; }

डेमो ।

आप इसे इस तरह से लागू कर सकते हैं:
HTML:

 <body> <span class="spanRed">    </span> <br/> <span class="spanBlue">    </span> <br/> <span class="spanGreen">    </span> <div class="block"></div> </body>

 CSS: span{ cursor:pointer; } div{ width:100px; height:50px; margin:5px; background:gray; } .spanRed:hover~.block{ background:red; } .spanBlue:hover~.block{ background:blue; } .spanGreen:hover~.block{ background:green; }

डेमो

चेतन

CSS3 की नई विशेषताओं के साथ संयोजन में एक बहुत ही रोचक प्रभाव प्राप्त किया जा सकता है। उदाहरण के लिए, नीचे दिया गया उदाहरण संक्रमण गुण का उपयोग करता है।

उदाहरण

HTML:

 <body> <span class="right"></span> <span class="left"></span> <span class="top"></span> <span class="down"></span> <br/> <div class="block"></div> </body>

 CSS: span{ position:absolute; display:block; width:100px; height:50px; margin:10px; background:silver; cursor:pointer; } .left{ top:12%; } .right{ top:12%; left:40%; } .top{ left:20%; } .down{ top:25%; left:20%; } .block{ position:absolute; top:50%; right:50%; width:100px; height:50px; margin:5px; background:gray; -webkit-transition:all 2s ease; -o-transition:all 2s ease; -moz-transition:all 2s ease; } .right:hover~.block{ right:10%; } .left:hover~.block{ right:90%; } .top:hover~.block{ top:10%; } .down:hover~.block{ top:90%; }

डेमो

जैसा कि आप देख सकते हैं, सामान्यीकृत संबंधित तत्वों के चयनकर्ता के पास पर्याप्त संख्या में दिलचस्प अनुप्रयोग हैं। हाल ही में, सीएसएस ने एक लंबा सफर तय किया है और आपको इसे लागू करने की अनुमति देता है जो पहले केवल जावास्क्रिप्ट का उपयोग करके संभव था।
लेकिन फिर भी, मेरी राय में, यदि हम एक सादृश्य आकर्षित करते हैं, तो सीएसएस एक यांत्रिक घटक है (यदि आप करेंगे, तो हार्डवेयर) जिसे तर्क बनाने के लिए डिज़ाइन नहीं किया गया है। उदाहरण के लिए, जावास्क्रिप्ट "सॉफ़्टवेयर" के रूप में कार्य कर सकता है।
इसलिए, इस लेख में मैंने सामान्यीकृत संबंधित तत्वों के चयनकर्ता के विषय को खोलने का प्रयास किया। यह निकला या नहीं, आप जज कीजिए।

खैर, अंत में (सूरज पर मंडराना)

जेनेरिक संबंधित तत्व चयनकर्ता

यह क्या है

के साथ प्रयोग करें: मंडराना

चेतन

More articles: