CSS3 में पहले-प्रकार के संरचनात्मक चयनकर्ता को देखें
एक चीज जो मुझे CSS3 के बारे में पसंद है, वह चयनकर्ताओं का नया जोड़ है जो हमें विशेष रूप से निर्भर किए बिना तत्वों को लक्षित करने की अनुमति देता है कक्षा, आईडी या अन्य तत्व विशेषता, और एक जिसे हम यहां कवर करेंगे वह निम्नलिखित चयनकर्ता है, : पहली प्रकार की.
: पहली प्रकार की चयनकर्ता निर्दिष्ट तत्व के पहले बच्चे को लक्षित करेगा, उदाहरण के लिए, नीचे स्निपेट पहले लक्ष्य करेगा h2 वेब पेज पर.
h2: पहला-प्रकार का / * शैली घोषणा * /
: पहली प्रकार की के बराबर भी है : N वें के- प्रकार (1), इसलिए केवल चयन करने के बजाय प्रथम प्रकार के अनुसार, हम दूसरे, तीसरे और इसी तरह का चयन कर सकते हैं। निम्नलिखित स्निपेट दूसरे को लक्षित करेगा h2 वेब पेज पर तत्व.
h2: nth-of-type (2) / * स्टाइल घोषणा * /
: पहली प्रकार की” बनाम. “:पहला बच्चा”
ऐसा लग सकता है कि ये दोनों चयनकर्ता एक ही काम कर रहे हैं, लेकिन ऐसा नहीं है। आइए निम्नलिखित प्रदर्शन देखें:
मान लीजिए कि हमारे पास पांच पैरा तत्व हैं, जो एक के भीतर लिपटे हुए हैं div, इस तरह:
परिच्छेद १
अनुच्छेद २
पैराग्राफ 3
पैराग्राफ 4
पैराग्राफ 5
अब, हम पहले पैराग्राफ का चयन करना चाहेंगे :पहला बच्चा चयनकर्ता.
p: पहला बच्चा गद्दी: 5px 10px; सीमा-त्रिज्या: 2 पीएक्स; पृष्ठभूमि: # 8960a7; रंग: #fff; बॉर्डर: 1px ठोस # 5b456a;
और जैसा कि हमने अनुमान लगाया है, पहला पैराग्राफ सफलतापूर्वक चुना गया है.
- : पहला बच्चा डेमो
हालाँकि, जब हम पहले एक अलग तत्व जोड़ें पहला पैराग्राफ, चलो एक कहते हैं h1, नीचे दिए गए स्निपेट की तरह:
शीर्षक 1
परिच्छेद १
अनुच्छेद २
पैराग्राफ 3
पैराग्राफ 4
पैराग्राफ 5
पहले पैराग्राफ का चयन नहीं किया जाएगा, अंदर के पहले बच्चे के रूप में div है अब एक पैराग्राफ नहीं है, लेकिन अब ए h1.
तो, यह वह स्थिति है जहाँ : पहली प्रकार की चयनकर्ता समस्या को हल करने के लिए आता है.
p: पहला-प्रकार का गद्दी: 5px 10px; सीमा-त्रिज्या: 2 पीएक्स; पृष्ठभूमि: # a8b700; रंग: #fff; बॉर्डर: 1px ठोस # 597500;
- : पहले प्रकार का डेमो
“अंतिम” चयनकर्ता
जहां है “प्रथम”, तो वहाँ भी होगा “अंतिम”.
जिन दो चयनकर्ताओं के बारे में हमने ऊपर चर्चा की है उनमें से निम्नलिखित दो चयनकर्ता हैं; :अंतिम बच्चा और यह : पिछले प्रकार की-. वे मूल रूप से ऊपर के दो के समान हैं, सिवाय इसके कि वे लक्ष्य करते हैं निर्दिष्ट तत्व का अंतिम बच्चा.
उदाहरण के लिए, नीचे का स्निपेट div के अंदर अंतिम पैराग्राफ को लक्षित करेगा.
p: अंतिम बच्चा गद्दी: 5px 10px; सीमा-त्रिज्या: 2 पीएक्स; पृष्ठभूमि: # 8960a7; रंग: #fff; बॉर्डर: 1px ठोस # 5b456a;
- : अंतिम बच्चे का डेमो
और यह स्निपेट अंतिम पैराग्राफ को उसी स्थिति में लक्षित करेगा जैसे हमने ऊपर चर्चा की है; इस बार एक अलग तत्व द्वारा सीधे पालन किया जाता है.
p: अंतिम-प्रकार गद्दी: 5px 10px; सीमा-त्रिज्या: 2 पीएक्स; पृष्ठभूमि: # a8b700; रंग: #fff; बॉर्डर: 1px ठोस # 597500;
- : अंतिम प्रकार का डेमो
Selectivizr
CSS3 में किसी भी अन्य नई सुविधा की तरह, ये चयनकर्ता मुख्य रूप से पुराने ब्राउज़रों में समर्थित नहीं हैं इंटरनेट एक्सप्लोरर 6 से 8, के लिए एक अपवाद के साथ :पहला बच्चा चयनकर्ता, क्योंकि इसे CSS2.1 से जोड़ा गया है। इसके रिश्तेदार द :अंतिम बच्चा केवल CSS3 में जोड़ा गया था.
इसलिए, अगर इन सभी चयनकर्ताओं का हमने यहां उल्लेख किया है, तो आपके वेबाइट के लिए वास्तव में आवश्यक हैं, तो आप जावास्क्रिप्ट नामक लाइब्रेरी का उपयोग कर सकते हैं Selectivizr उन CSS3 चयनकर्ता की कार्यक्षमता का अनुकरण करने के लिए.
Selectivizr काम करने के लिए अन्य जावास्क्रिप्ट पुस्तकालयों पर निर्भर है, जैसे कि jQuery, Dojo, प्रोटोटाइप और MTTools; और आधिकारिक वेबसाइट में तुलना तालिका से, MooTools सभी चयनकर्ताओं को संभालने में सक्षम प्रतीत होता है.
तो, चलो Selectivizr के साथ इसे शामिल करें, इस प्रकार है:
ऊपर दी गई सशर्त टिप्पणी यह सुनिश्चित करेगी कि ये लाइब्रेरी केवल इंटरनेट एक्सप्लोरर 8 और उसके नीचे लोड की जाएंगी.
अंत में, आप डेमो को निम्नलिखित लिंक से देख सकते हैं और इसे अब आधुनिक और पुराने ब्राउज़र (IE8 और नीचे) दोनों में काम करना चाहिए। आप आगे की परीक्षा के लिए स्रोत फ़ाइल भी डाउनलोड कर सकते हैं। का आनंद लें.
- डेमो
- स्रोत डाउनलोड करें
