पहले / अंतिम तत्वों के लिए मार्जिन निकालें - सीएसएस-ट्रिक्स

कभी-कभी कंटेनर में पहले तत्व से शीर्ष या बाएं मार्जिन को हटाने के लिए यह वांछनीय हो सकता है। इसी तरह, एक कंटेनर में अंतिम तत्व से सही या निचला मार्जिन। आप HTML में कक्षाओं को मैन्युअल रूप से लागू करके ऐसा कर सकते हैं:

.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )

"शीर्ष" / "नीचे" शून्यिंग तत्वों के एक ऊर्ध्वाधर ढेर के साथ उपयोगी हो रहा है, "बाएं" / "सही" शून्यिंग क्षैतिज पंक्तियों (सामान्य रूप से) के लिए उपयोगी हो रहा है। लेकिन ... यह विधि आपके द्वारा स्वयं HTML में कक्षाएं जोड़ने पर निर्भर है। छद्म चयनकर्ता जाने के लिए एक बेहतर कम दखल देने वाला तरीका हो सकता है:

* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )

आप अपनी आवश्यकताओं के अनुसार अधिक विशिष्ट चयनकर्ताओं के साथ * को प्रतिस्थापित करना चाह सकते हैं।

"हर तीसरा", आदि।

कहते हैं कि आपके पास 9 तत्वों का फ्लोटेड ब्लॉक था, 3 बाय 3. यह बहुत आम है कि आपको 3 जी, 6 वें और 9 वें आइटम से सही मार्जिन को हटाने की आवश्यकता हो सकती है। Nth-child छद्म चयनकर्ता वहां मदद करने में सक्षम हो सकता है:

* > :nth-child(3n+3) ( margin-right: 0; )

वहाँ समीकरण, 3n + 3, इस तरह काम करता है:

(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
आदि।

jQuery

jQuery CSS3 चयनकर्ताओं का उपयोग करता है, जिसमें शामिल हैं: पहला-बच्चा, अंतिम बच्चा, और: nth-child ()। इसका मतलब यह है कि इन चयनकर्ताओं को पूरी तरह से समर्थन नहीं है या नहीं है, वे jQuery में काम करेंगे, इसलिए आप जावास्क्रिप्ट समर्थन के साथ CSS समर्थन को स्थानापन्न कर सकते हैं। उदाहरण के लिए:

$("* > :nth-child(3n+3)").css("margin-right", 0);

ब्राउज़र का समर्थन

: पहला-बच्चा और: अंतिम-बच्चा सभी प्रमुख ब्राउज़रों से नवीनतम रिलीज में काम करता है, लेकिन IE में नहीं 6. 6. पहला बच्चा IE 7+ में समर्थित है। : nth-child सफारी 3+, फ़ायरफ़ॉक्स 3.5+ और क्रोम 1+ में काम करता है, लेकिन फिर भी IE8 में काम नहीं करता है।

डेविड ओलिवर का लेख भी देखें।