: पहला बच्चा - सीएसएस-ट्रिक्स

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

मान लीजिए कि हमारे पास एक लेख है और पहले पैराग्राफ को बड़ा बनाना चाहते हैं - जैसे "लीड", या परिचयात्मक पाठ का टुकड़ा:

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

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

p:first-child ( font-size: 1.5em; )

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

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

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

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

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

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