S सिंटैक्स के साथ :nth-child() चुनने पर ज़्यादा कंट्रोल

An+B लॉजिक को लागू करने से पहले, चाइल्ड एलिमेंट के किसी सेट को पहले से फ़िल्टर करें.

ब्रैमस

:nth-child() और :nth-last-child() बदली हुई क्लास सिलेक्टर

:nth-child() सूडो-क्लास सिलेक्टर की मदद से, डीओएम में एलिमेंट को उनके इंडेक्स के हिसाब से चुना जा सकता है. An+B माइक्रोसिंटैक्स का इस्तेमाल करके, यह बेहतर तरीके से कंट्रोल किया जा सकता है कि आपको कौनसे एलिमेंट चुनने हैं.

  • :nth-child(2): दूसरे बच्चे का नाम चुनें.
  • :nth-child(2n): सभी बच्चे चुनें (2, 4, 6, 8 वगैरह).
  • :nth-child(2n+1): सभी विषम बच्चे (पहला, तीसरा, पांचवां, सातवां और इसी तरह के दूसरे बच्चे) चुनें.
  • :nth-child(5n+1): पहला (=(5×0)+1), छठा (=(5×1)+1), 11वां (=(5×2)+1), ... बच्चा चुनें.
  • :nth-child(5n+2): दूसरा (=(5×0)+2), सातवां (=(5×1)+2), 12वां (=(5×2)+2), ... बच्चा चुनें.

हालांकि, A पैरामीटर को छोड़ने पर, कई और क्रिएटिव विकल्प चुने जा सकते हैं. उदाहरण के लिए:

  • :nth-child(n+3): तीसरे पक्ष से ऊपर दिए गए सभी बच्चों का नाम चुनें (तीसरा, चौथा, पांचवां, और इसी तरह के कई बच्चे).
  • :nth-child(-n+5): पांचवें बच्चे तक के बच्चों के नाम चुनें (पहला, दूसरा, तीसरा, चौथा, पांचवां).

:nth-child() चुनने के लिए इनमें से कुछ को जोड़ें और एलिमेंट की रेंज चुनी जा सकती हैं:

  • :nth-child(n+3):nth-child(-n+5): तीसरे से लेकर पांचवें बच्चे तक के हर बच्चे का नाम चुनें (3, चौथा, 5वां).

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

of S सिंटैक्स के साथ पहले से फ़िल्टर करने की सुविधा

सीएसएस सिलेक्टर लेवल 4 में नई सुविधा की मदद से, विकल्प के तौर पर सिलेक्टर की सूची को :nth-child() और :nth-last-child() में पास किया जा सकता है.

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

of S के बारे में बताने पर, An+B लॉजिक सिर्फ़ उन एलिमेंट पर लागू होता है जो सिलेक्टर की दी गई S सूची से मैच करते हैं. इसका मतलब है कि An+B के काम करने से पहले, बच्चों को पहले से फ़िल्टर किया जा सकता है.

ब्राउज़र सहायता

  • 111
  • 111
  • 113
  • 9

उदाहरण

उदाहरण के लिए, :nth-child(2 of .highlight) मैच करने वाले दूसरे एलिमेंट को चुनता है, जिसमें .highlight क्लास होती है. इसे अलग तरीके से रखें: .highlight क्लास वाले सभी बच्चों में से, दूसरा वाला चुनें.

यह .highlight:nth-child(2) से उलट है, जो .highlight क्लास वाला एलिमेंट चुनता है और दूसरा चाइल्ड भी है.

नीचे दिए गए डेमो में, आपको यह अंतर दिखेगा:

  • :nth-child(2 of .highlight) से मेल खाने वाले एलिमेंट की आउटलाइन गुलाबी होती है.
  • .highlight:nth-child(2) से मेल खाने वाले एलिमेंट की आउटलाइन हरे रंग की होती है.

ध्यान दें कि S, सिलेक्टर की एक सूची है. इसका मतलब है कि यह सिलेक्टर एक से ज़्यादा सिलेक्टर को स्वीकार करता है, जिन्हें कॉमा लगाकर अलग किया जाता है. जैसे, :nth-child(4 of .highlight, .sale) भाई-बहनों के सेट से चौथा एलिमेंट चुनता है, जो .highlight या .sale होता है.

नीचे दिए गए डेमो में, :nth-child(4 of .highlight, .sale) से मेल खाने वाले एलिमेंट पर नारंगी रंग की आउटलाइन लागू की गई है.

ज़ेब्रा-धारीदार, दोबारा देखी गई

ज़ीब्रा-स्ट्रिप वाली टेबल बनाते समय, :nth-child() का इस्तेमाल किया जाता है. इसका एक क्लासिक उदाहरण है. यह एक विज़ुअल तकनीक है, जिसमें टेबल की हर पंक्ति के लिए रंगों को बदला जाता है. आम तौर पर, ऐसा किया जाता है:

tr:nth-child(even) {
  background-color: lightgrey;
}

यह तरीका स्टैटिक टेबल के लिए ठीक से काम करता है. हालांकि, टेबल के कॉन्टेंट को डाइनैमिक तरीके से फ़िल्टर करने पर, समस्या हो सकती है. उदाहरण के लिए, जब पंक्ति दो छिपी होती है, तो आपको एक और तीन पंक्तियां दिखती हैं. इनमें से हर पंक्ति के बैकग्राउंड का रंग एक जैसा होगा.

इसे ठीक करने के लिए, हम An+B लॉजिक से छिपी हुई पंक्तियों को बाहर रखकर :nth-child(An+B [of S]?) का फ़ायदा ले सकते हैं:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

बहुत बढ़िया, है न?

Unsplash पर मार्कस स्पिन की फ़ोटो