: आखिरी बच्चा - सीएसएस-ट्रिक्स

:last-childचयनकर्ता आप अपने युक्त तत्व के अंदर सीधे पिछले तत्व को लक्षित कर सकते। यह सीएसएस सिलेक्टर्स लेवल 3 कल्पना में "संरचनात्मक छद्म वर्ग" के रूप में परिभाषित किया गया है, जिसका अर्थ है कि यह माता-पिता और सहोदर सामग्री के साथ अपने संबंधों के आधार पर सामग्री को स्टाइल करने के लिए उपयोग किया जाता है।

मान लें कि हमारे पास एक लेख है और अंतिम निष्कर्ष को सामग्री के निष्कर्ष के रूप में कार्य करने के लिए छोटा करना चाहते हैं (जैसे संपादक का नोट):

Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…

एक वर्ग (जैसे .last) का उपयोग करने के बजाय , हम :last-childइसे चुनने के लिए उपयोग कर सकते हैं :

p:last-child ( font-size: 0.75em; )

का उपयोग करना :last-childबहुत ही समान है :last-of-typeलेकिन एक महत्वपूर्ण अंतर के साथ: यह कम विशिष्ट है। :last-childकेवल मूल तत्व के अंतिम बच्चे से मेल खाने की कोशिश करेगा, जबकि last-of-typeनिर्दिष्ट तत्व की अंतिम घटना से मेल खाएगा, भले ही यह HTML में अंतिम रूप से मृत न हो। उदाहरण के ऊपर परिणाम समान होगा, केवल इसलिए कि अंतिम बच्चा articleभी अंतिम pतत्व होता है। इससे शक्ति का पता चलता है :last-child: यह अपने सभी भाई-बहनों के संबंध में एक तत्व की पहचान कर सकता है, न कि एक ही प्रकार के भाई-बहन।

नीचे दिया गया पूर्ण उदाहरण उदाहरण :last-childऔर संबंधित छद्म श्रेणी चयनकर्ता के उपयोग को दर्शाता है :first-child।

इस पेन को देखें!

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

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
कोई	३.२+	कोई	9.5+	9+	कोई	कोई

:last-childCSS चयनकर्ता मॉड्यूल 3 में पेश किया गया था, जिसका अर्थ है कि पुराने संस्करण के ब्राउज़र इसका समर्थन नहीं करते हैं। हालांकि, आधुनिक ब्राउज़र समर्थन त्रुटिहीन है, और नए छद्म चयनकर्ता व्यापक रूप से उत्पादन वातावरण में उपयोग किए जाते हैं। यदि आपको IE के लिए पुराने ब्राउज़र समर्थन की आवश्यकता है, या तो IE के लिए पॉलीफ़िल, या गैर-महत्वपूर्ण तरीकों से इन चयनकर्ताओं का उपयोग करें, जो कि प्रगतिशील वृद्धि है।