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

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

मान लें कि हमारे पास एक शीर्षक और कई पैराग्राफ के साथ एक लेख है:

Paragraph 1.
Paragraph 2.
Paragraph 3.

हम पहले पैराग्राफ को "लीड" या परिचयात्मक पैराग्राफ के रूप में बड़ा बनाना चाहते हैं। इसे एक वर्ग देने के बजाय, हम :first-of-typeइसे चुनने के लिए उपयोग कर सकते हैं :

p:first-of-type ( font-size: 1.25em; )

का उपयोग करना :first-of-typeबहुत ही समान है :nth-childलेकिन एक महत्वपूर्ण अंतर के साथ: यह कम विशिष्ट है। ऊपर के उदाहरण में, यदि हमने उपयोग किया था, तो p:nth-child(1)कुछ भी नहीं होगा क्योंकि पैराग्राफ अपने माता-पिता ( ) का पहला बच्चा नहीं है । इससे शक्ति का पता चलता है :first-of-type: यह एक विशेष प्रकार के तत्व को एक विशेष व्यवस्था में समान भाई-बहनों के संबंध में लक्षित करता है, सभी भाई-बहनों को नहीं।

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

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

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

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

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