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 अभी कक्षाओं के साथ स्टाइल करने के बारे में नहीं है?
आधुनिक वेब विकास में, स्टाइलिंग तत्व चयनकर्ताओं से सीधे बचना लोकप्रिय है। अधिकांश कक्षाओं का उपयोग करते हैं अभी। मैं कक्षाओं का भी प्रशंसक हूं, क्योंकि वे बढ़ते वेब प्लेटफॉर्म पर स्केलेबल और पुन:प्रयोज्य सीएसएस लिखना आसान बनाते हैं।
हालाँकि, प्रत्यक्ष चयनकर्ता स्टाइल में अभी भी इसका स्थान है। अपने उत्पाद UI के माध्यम से स्वचालित रूप से एकरूपता और एकरूपता स्थापित करने के लिए सीधे तत्व चयनकर्ताओं पर कुछ आधारभूत/वैश्विक स्टाइल स्थापित करना व्यावहारिक है। यह तरीका आपको बार-बार दोहराए जाने वाले UI स्टाइल से बचा सकता है — जब सही तरीके से किया जाए।