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

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

Bramus

:nth-child() और :nth-last-child() स्यूडो-क्लास सिलेक्टर

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

• :nth-child(2): दूसरे बच्चे का नाम चुनें.
• :nth-child(2n): सभी सम संख्या वाले चाइल्ड एलिमेंट (दूसरा, चौथा, छठा, आठवाँ वगैरह) चुनें.
• :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): तीसरे से लेकर पांचवें तक के हर चाइल्ड को चुनें (तीसरा, चौथा, पांचवां).

: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 के काम करने से पहले, बच्चों के लिए कॉन्टेंट को फ़िल्टर किया जा सकता है.

उदाहरण

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

यह .highlight:nth-child(2) से अलग है. .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;
}

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

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

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

यह काफ़ी अच्छा है, है न?

Unsplash पर Markus Spiske की फ़ोटो