CSS `:not(:first-child) सिलेक्टर के साथ पहले को छोड़कर सभी HTML एलिमेंट्स को सिलेक्ट करना सीखें।
यदि आप अपने CSS स्टाइलशीट में निम्नलिखित नियम-सेट जोड़ते हैं, तो आपकी पूरी वेबसाइट पर हर h2 एलिमेंट को 64px टॉप मार्जिन मिलेगा।
h2 { margin-top: 64px; }लेकिन क्या होगा यदि आप अपनी वेबसाइट पर सामान्य रूप से सबसे पहले h2 एलिमेंट को वह टॉप मार्जिन नहीं देना चाहते, लेकिन हर दूसरे h2 एलिमेंट को देना चाहते हैं?
:not(:first-child) सिलेक्टर का उपयोग करें
अपने स्टाइलशीट में निम्नलिखित नियम-सेट जोड़ें:
h2:not(:first-child) { margin-top: 64px; }अब आपकी वेबसाइट पर हर h2 एलिमेंट को लगातार वही मार्जिन-टॉप मान मिलेगा — प्रत्येक डॉक्यूमेंट (पेज/पोस्ट) पर सबसे पहले h2 एलिमेंट को छोड़कर।
:not(:first-child) सिलेक्टर के लिए एक उपयोग का मामला
मान लीजिए आप अपनी वेबसाइट के टाइपोग्राफिक लेआउट को स्टाइल कर रहे हैं। आप तय करते हैं कि आपके सभी आर्टिकल्स के h2 हेडिंग एलिमेंट्स में सेक्शन्स के बीच ब्रीदिंग रूम देने के लिए margin-top: 64px; होना चाहिए।
लेकिन हर आर्टिकल के शीर्ष पर, आपके पास एक इंट्रो सेक्शन है जिसमें मैगज़ीन/पोस्टर स्टाइल में एक कवर इमेज, एक ओवरले और शीर्ष पर विभिन्न टेक्स्ट एलिमेंट्स हैं। उस स्थिति में, आप कई हेडिंग एलिमेंट्स (h1 शीर्षक के लिए, h2 टैगलाइन के लिए, आदि) का उपयोग कर सकते हैं।
उस स्थिति में, आप शायद अपने इंट्रो सेक्शन में ठीक वही स्पेसिंग मान (मार्जिन/पैडिंग) उपयोग नहीं करना चाहेंगे, जितना आपके आर्टिकल के अंदर। :not(:first-child) सिलेक्टर का उपयोग करके, आप उस समस्या को हटा देते हैं।
आप इस सिलेक्टर का उपयोग हर HTML एलिमेंट पर कर सकते हैं। एक और आम उपयोग का मामला है यदि आप अपने मेनू के लिए अनऑर्डर्ड लिस्ट <ul> का उपयोग करते हैं। आपके मेनू में ul में जोड़ने के लिए कुछ बहुत विशिष्ट स्टाइलिंग हो सकती है, लेकिन आपकी साइट के बाकी हिस्सों पर नहीं (अलाइनमेंट, बॉर्डर्स, कलर्स, आदि)।
क्या CSS अब क्लासेस के साथ स्टाइलिंग के बारे में नहीं है?
आधुनिक वेब विकास में, एलिमेंट सिलेक्टर्स को सीधे स्टाइल करने से बचना लोकप्रिय है। अधिकांश अब क्लासेस का उपयोग करते हैं। मैं भी क्लासेस का प्रशंसक हूं, क्योंकि वे बढ़ते वेब प्लेटफॉर्म पर स्केलेबल और पुन: उपयोग करने योग्य CSS लिखना आसान बनाते हैं।
हालांकि, डायरेक्ट सिलेक्टर स्टाइलिंग की अभी भी अपनी जगह है। एलिमेंट सिलेक्टर्स पर सीधे कुछ बेसलाइन/ग्लोबल स्टाइलिंग स्थापित करना व्यावहारिक है ताकि आपके उत्पाद UI में स्वचालित रूप से स्थिरता और एकरूपता पैदा हो। सही ढंग से किए जाने पर यह दृष्टिकोण आपको बहुत सारे दोहराव वाले UI स्टाइलिंग से बचा सकता है।
