CSS :nth-of-type() शैली

व्याख्या और उपयोग

CSS :nth-of-type(n) फूटकस्टाइल इसके पारित एलीमेंट के रूप में चुनता है कि यह उसके पारित एलीमेंट के बाईं भाग में किस नंबर के उप-एलीमेंट है n उप-एलीमेंट के प्रत्येक एलीमेंट को चुनता है।

n यह एक नंबर/इंडेक्स या एक शब्दांक (असमान या समान) या एक सूत्र (जैसे an + b)

सूचना:देखें :nth-child() फूटकस्टाइल इसके पारित एलीमेंट के रूप में चुनता है कि यह उसके पारित एलीमेंट के बाईं भाग में किस नंबर के उप-एलीमेंट है n किसी भी प्रकार के उप-एलीमेंट के एलीमेंट को चुनता है, बिना उसके नाम के तुलना किए जाने की।

उदाहरण

उदाहरण 1

कैसे इस्तेमाल करें :nth-of-type() चयनकर्ता:

/* div भाई एलीमेंट में दूसरे एलीमेंट को चुनें */
div:nth-of-type(2) {
  background: red;
}
/* सूची में दूसरे li एलीमेंट को चुनें */
li:nth-of-type(2) {
  background: lightgreen;
}
/* किसी भी भाई एलीमेंट समूह के प्रत्येक तीसरे एलीमेंट को चुनें */
:nth-of-type(3) {
  background: yellow;
}

अपने आप सिफारिश करें

उदाहरण 2

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

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

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

अपने आप सिफारिश करें

उदाहरण 3

सूत्र (an + b) वर्णन:a यह एक पूर्णांक दशांश है, n से शुरू होकर सभी अविभाज्य संख्याओं के लिए है,b यह एक पूर्णांक एक्सोफेट है।

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

p:nth-of-type(3n+0) {
  background: red;
}

अपने आप सिफारिश करें

उदाहरण 4

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

p:nth-of-type(3n-1) {
  background: red;
}

अपने आप सिफारिश करें

CSS व्याकरण

:nth-of-type(index | असमान | समान | an+b) {
  css व्यक्तव्य;
}

तकनीकी विवरण

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

तालिका में दिए गए नंबर इस फूटकस्टाइल के पहले समर्थक ब्राउज़र का संस्करण निर्दिष्ट करते हैं।