अभिभावक के भीतर कक्षा की पहली घटना का चयन करना

सीएसएस में, चुनौती तब उत्पन्न होती है जब आपको कक्षा के पहले तत्व को लक्षित करने की आवश्यकता होती है मूल तत्व के भीतर विशिष्ट वर्ग, खासकर जब वर्ग अपने भाई-बहनों के भीतर अलग-अलग स्थिति में दिखाई दे सकता है। यह समस्या तब और भी जटिल हो जाती है जब मूल तत्व की कक्षा या चाइल्ड संरचना भिन्न हो सकती है।

:प्रथम प्रकार का छद्म-वर्ग

CSS3 :first प्रदान करता है -ऑफ-टाइप छद्म-वर्ग, जो आपको उसके भाई-बहनों के भीतर एक विशिष्ट प्रकार के पहले तत्व का चयन करने की अनुमति देता है। हालाँकि, किसी दिए गए वर्ग के पहले तत्व को चुनने के लिए विशेष रूप से :प्रथम श्रेणी छद्म वर्ग का कोई समकक्ष नहीं है।

~ और सामान्य सहोदर चयनकर्ता का उपयोग करके एक समाधान

&&&]एक समाधान यह है कि ओवरराइडिंग नियम के साथ सामान्य सिबलिंग कॉम्बिनेटर (~) का उपयोग किया जाए। समान वर्ग के अन्य तत्वों पर लागू डिफ़ॉल्ट शैलियों को जानकर, आप एक अधिक विशिष्ट नियम बना सकते हैं जो केवल उन तत्वों के लिए डिफ़ॉल्ट शैलियों को ओवरराइड करता है जो लक्ष्य वर्ग की पहली घटना का पालन करते हैं।

उदाहरण :

.parentClass > * > .targetClass { /* .parentClass के भीतर सभी .targetClass तत्वों पर शैलियाँ लागू करें */ } .parentClass > * > .targetClass ~ .targetClass { /* केवल .targetClass तत्वों पर ओवरराइडिंग शैलियाँ लागू करें जो इसका अनुसरण करते हैं */ }

.parentClass > * > .targetClass {
    /* Apply styles to all .targetClass elements within .parentClass */
}

.parentClass > * > .targetClass ~ .targetClass {
    /* Apply overriding styles only to .targetClass elements that follow */
}

चित्रण:

निम्नलिखित HTML संरचना पर विचार करें:

.parentClass > * > .targetClass {
    /* Apply styles to all .targetClass elements within .parentClass */
}

.parentClass > * > .targetClass ~ .targetClass {
    /* Apply overriding styles only to .targetClass elements that follow */
}

इस परिदृश्य में, पहला नियम "पैरेंटक्लास" तत्व के अंदर "लक्ष्यक्लास" वर्ग वाले सभी तत्वों पर शैलियों को लागू करेगा। दूसरा नियम उन सभी "टारगेटक्लास" तत्वों के लिए उन शैलियों को ओवरराइड कर देगा जो पहले नियम का पालन करते हैं, पहले नियम द्वारा लागू किसी भी कस्टम शैली को उलट देंगे।

ब्राउज़र संगतता:

सामान्य सिबलिंग कॉम्बिनेटर (~) को IE7 और बाद में मान्यता प्राप्त है। इसलिए, यह समाधान IE6 को छोड़कर सभी प्रमुख ब्राउज़रों के साथ संगत है।