:nth-child और :nth-of-type
nth सूत्रों और type selector का उपयोग करके parent में स्थिति के आधार पर elements चुनना सीखिए।
:nth-child और :nth-of-type, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
संरचनात्मक छद्म-क्लास क्या हैं?
संरचनात्मक छद्म-क्लास तत्वों का चयन उनके पैरेंट के भीतर उनकी स्थिति के आधार पर करती हैं। इनकी सहायता से किसी विशेष चाइल्ड तत्व को लक्षित करने के लिए क्लास या JavaScript जोड़ने की आवश्यकता नहीं रहती।
:first-child और :last-child
किसी पैरेंट के पहले या अंतिम चाइल्ड का चयन करें:
<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>
:nth-child() की मूल बातें
:nth-child(n) किसी भी प्रकार के सहोदर तत्वों के बीच उनकी स्थिति (1 से शुरू होने वाली गिनती) के आधार पर तत्वों का चयन करता है।
<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>
:nth-child() में कीवर्ड
बारी-बारी से पंक्तियों को शैली देने के लिए odd या even कीवर्ड का उपयोग करें:
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
:nth-child() में फ़ॉर्मूले
An+B फ़ॉर्मूले का उपयोग करें, जहाँ A चरण और B ऑफ़सेट है। n 0 से शुरू होता है और बढ़ता जाता है।
3n— हर तीसरा (3, 6, 9...)3n+1— हर तीन में पहला (1, 4, 7...)-n+3— केवल पहले तीन आइटम
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
:nth-of-type()
:nth-of-type() केवल एक ही तत्व-प्रकार वाले सहोदर तत्वों की गिनती करता है और अन्य को अनदेखा करता है। जब तत्वों के प्रकार मिले-जुले हों, तब यह महत्वपूर्ण है।
<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>
:first-of-type और :last-of-type
सहोदर तत्वों में किसी विशेष टैग-प्रकार के पहले या अंतिम तत्व का चयन करें:
<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />
:nth-child बनाम :nth-of-type
मुख्य अंतर:
p:nth-child(2)— दूसरे चाइल्ड का चयन करता है IF वह<p>होp:nth-of-type(2)— अन्य तत्वों की परवाह किए बिना दूसरे<p>का चयन करता है
:only-child और :only-of-type
:only-child उस तत्व का चयन करता है, जो अपने पैरेंट का एकमात्र चाइल्ड हो। :only-of-type उस तत्व का चयन करता है, जो अपने पैरेंट में अपने प्रकार का अकेला तत्व हो।
<div><p>I'm the only child in this div.</p></div>
:nth-child में of S चयनकर्ता (आधुनिक)
आधुनिक CSS में :nth-child(An+B of selector) का उपयोग करके यह फ़िल्टर किया जा सकता है कि nth फ़ॉर्मूला किन तत्वों की गिनती करे:
<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>
व्यावहारिक उपयोग: अंतिम पंक्ति में ग्रिड अंतर
अंतिम दिखाई दे रहे तत्व का निचला मार्जिन हटाएँ:
<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
त्वरित जाँच
पहले आइटम से शुरू करके हर तीसरे सूची आइटम को कौन-सा चयनकर्ता लक्षित करता है?
पुनरावृत्ति
:nth-child() सभी सहोदर तत्वों की स्थिति के आधार पर गिनती करता है; :nth-of-type() केवल एक ही टैग वाले सहोदर तत्वों की गिनती करता है। धारीदार तालिकाओं के लिए odd/even का उपयोग करें। An+B फ़ॉर्मूला क्लास जोड़े बिना “हर तीसरा” या “पहले पाँच” जैसे शक्तिशाली पैटर्न बनाने की सुविधा देता है।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “:nth-child और :nth-of-type” पाठ निःशुल्क है?
हाँ—“:nth-child और :nth-of-type” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“:nth-child और :nth-of-type” में मैं क्या सीखूँगा?
nth सूत्रों और type selector का उपयोग करके parent में स्थिति के आधार पर elements चुनना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“:nth-child और :nth-of-type” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- :hover :focus :active और :visited
- :nth-child और :nth-of-type
- :not() :is() और :where()
- :checked :disabled और फ़ॉर्म अवस्था के Pseudo