बीच का अंतर: nth-child और: nth-of-type

मान लीजिए कि ऐसा HTML है:

<अनुभाग>
< p > छोटा < / p >
< p > पिगी < / p > <! - इस आइटम की आवश्यकता है ->
< / अनुभाग>

निम्नलिखित सीएसएस वही करेगा:

p : nth- बच्चे ( 2 ) { color : red ; }

p : nth-of- type ( 2 ) { color : red ; }

हालांकि, निश्चित रूप से, इन चयनकर्ताओं में, एक अंतर है।

छद्म वर्ग : nth-child , का अर्थ है एक तत्व का चयन करें यदि:

1. यह तत्व एक पैराग्राफ है;
2. यह एकल अभिभावक का दूसरा तत्व है।

छद्म वर्ग : nth-of-type , साधन:

1. एक माता-पिता के दूसरे पैराग्राफ का चयन करें।

मान लीजिए कि हमारा मार्कअप निम्नानुसार है:

<अनुभाग>
< h1 > शब्द < / h1 >
< p > छोटा < / p >
< p > पिगी < / p > <! - इस आइटम की आवश्यकता है ->
< / अनुभाग>

अब पहला विकल्प काम नहीं करता है:

p : nth- बच्चे ( 2 ) { color : red ; } / * काम नहीं करता है * /

दूसरा काम करना जारी रखता है:

p : nth-of- type ( 2 ) { color : red ; } / * काम करना जारी रखता है * /

"काम नहीं करता है," से मेरा मतलब है कि :nth-child selector "Piggy" के बजाय "Little" शब्द का चयन करता है। क्योंकि तत्व दोनों स्थितियों को पूरा करता है: 1) यह मूल तत्व का दूसरा तत्व है और 2) यह एक पैराग्राफ है। "काम करना जारी रखता है" से मेरा मतलब है कि चयनकर्ता को "पिगी" के रूप में चुना जाना जारी है, क्योंकि यह मूल तत्व का दूसरा पैराग्राफ है।

यदि आप <h1> <h2> बाद <h2> जोड़ते हैं, तो चयनकर्ता: nth-child कुछ भी नहीं चुनेगा क्योंकि अनुच्छेद अब दूसरा तत्व नहीं है। के साथ चयनकर्ता :nth-of-type काम करना जारी रखेगा।

यह मुझे लगता है :nth-of-type कम नाजुक और सामान्य रूप से अधिक उपयोगी है, इसके बावजूद :nth-child मुख्य काम जारी है। आप कितनी बार सोचते हैं, "मैं मूल तत्व में दूसरा तत्व चुनना चाहता हूं, अगर यह एक पैराग्राफ है।" शायद कभी-कभी, लेकिन अधिक बार आपको लगता है कि "दूसरा पैराग्राफ चुनें" या "तालिका की हर तीसरी पंक्ति का चयन करें", इन कार्यों के लिए :nth-of-type अधिक उपयुक्त है (फिर से, मेरी राय में)।

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

dl : nth- बच्चे ( 2 ) { } / * यह विकल्प * / से बेहतर है
dd : nth- बच्चे ( 2 ) { } / * यह * /

लेकिन, निश्चित रूप से, यह सभी विशिष्ट स्थिति पर निर्भर करता है।

ब्राउज़र समर्थन :nth-of-type बहुत सभ्य है ... फ़ायरफ़ॉक्स 3.5+, ओपेरा 9.5+, क्रोम 2+, सफारी 3.1+, IE 9+। मैं कहूंगा कि यदि आपको अधिक गहरी समर्थन की आवश्यकता है, तो jQuery का उपयोग करें (चयनकर्ता का उपयोग करें और जहां आवश्यक हो उस वर्ग को लागू करें), लेकिन jQuery ने समर्थन करना बंद कर दिया है :nth-of-type । मैंने सुना है कि दुर्लभ उपयोग के कारण, लेकिन यह मुझे अजीब लगता है। यदि आप इस मार्ग पर जाना चाहते हैं, तो यहां एक प्लगइन है जो वापस समर्थन देता है ।