CSS :nth-child() शैली प्रतीक

वर्णन और उपयोग

CSS :नथ-चाइल्ड(n)}} अनुप्रयोगकारी वर्ग के n उप-एलीमेंट

यह एनुप्रयोगकारी वर्ग अपने पैरिंट एलीमेंट के उप-सूची में एलीमेंट के इंडेक्स के आधार पर मेल खाता है।

n यह एक नंबर/इंडेक्स, एक अशब्द (विषम या इवन) या एक फॉर्मूला (जैसे एn + बी)

सुझाव:देखें :नथ-ऑफ-टाइप() अनुप्रयोगकारी वर्ग के भीतरएक-सी तरह के (लेबल नाम)के n एक उप-एलीमेंट के एलीमेंट को चुनने के लिए

उदाहरण

उदाहरण 1

कैसे इस्तेमाल करें :नथ-चाइल्ड() अनुप्रयोगकारी वर्ग:

/* किसी भी ब्रदर एलीमेंट समूह में चौथे एलीमेंट को चुनें */
:नथ-चाइल्ड(4) {
  बैकग्राउंड-कलर: येल्लो;
}
/* div ब्रदर एलीमेंट में दूसरे एलीमेंट को चुनें */
डिव:नथ-चाइल्ड(2) {
  बैकग्राउंड-कलर: लाइटग्रीन;
}
/* सूची में दूसरे li एलीमेंट को चुनें */
ली:नथ-चाइल्ड(2) {
  बैकग्राउंड-कलर: लाइटग्रीन;
}

अपने आप प्रयोग करें

उदाहरण 2

विषम और इवन एक अशब्द है, जो विषम या सम इंडेक्स वाले उप-एलीमेंटों को मेल खाता है (पहले उप-एलीमेंट का इंडेक्स 1 है)।

यहाँ, हम विषम और सम इंडेक्स वाले <पी> एलीमेंटों के लिए अलग-अलग बैकग्राउंड कलर निर्दिष्ट करते हैं:

पी:नथ-चाइल्ड(विषम) {
  बैकग्राउंड-कलर: लाइटग्रीन;
}
पी:नथ-चाइल्ड(इवन) {
  बैकग्राउंड: लाइटग्रीन;
}

अपने आप प्रयोग करें

उदाहरण 3

फॉर्मूला (एn + बी) वर्णन:ए यह एक पूर्णांक कदम है, n से शुरू होकर सभी अविभाज्य पूर्णांक है,बी यह एक पूर्णांक खिड़की है।

यहाँ, हम 3 के गुणा के इंडेक्स वाले सभी <पी> एलीमेंटों के लिए बैकग्राउंड कलर निर्दिष्ट करते हैं (तीसरे, छठे, नौवें इत्यादि एलीमेंटों को चुनेगा):

पी:नथ-चाइल्ड(3n+1) {
  बैकग्राउंड-कलर: लाइटग्रीन;
}

अपने आप प्रयोग करें

उदाहरण 4

यहाँ, हम 3 के गुणा के इंडेक्स वाले सभी <पी> एलीमेंटों के लिए बैकग्राउंड कलर निर्दिष्ट करते हैं। फिर इसे 1 से कम करते हैं (यह पहला, चौथा, सातवां इत्यादि एलीमेंटों को चुनेगा):

पी:नथ-चाइल्ड(3n-1) {
  बैकग्राउंड-कलर: लाइटग्रीन;
}

अपने आप प्रयोग करें

सीएसएस व्याकरण

:नथ-चाइल्ड(इंडेक्स | विषम | सम एएन+बी) {
  सीएसएस निर्णय;
}

तकनीकी विवरण

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

तालिका में दिए गए नंबर इस अनुप्रयोगकारी वर्ग के पहले समर्थक ब्राउज़र संस्करण को निर्दिष्ट करते हैं।