CSS :nth-of-type() चयनकर्ता
उदाहरण
प्रत्येक <p> तत्व के लिए पृष्ठभूमि रंग निर्दिष्ट करें जो कि उसके माता-पिता का दूसरा p तत्व है:
p:nth-of-type(2)
{
background: red;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
चयनकर्ता प्रत्येक तत्व से मेल खाता है जो कि n वां बच्चा है, एक विशेष प्रकार का, उसके माता-पिता का।:nth-of-type(n)
n एक संख्या, एक कीवर्ड या एक सूत्र हो सकता है।
युक्ति: उस तत्व का चयन करने के लिए :nth-child() चयनकर्ता को देखें जो n वां बच्चा है, चाहे उसके माता-पिता का प्रकार कुछ भी हो।
संस्करण: | CSS3 |
---|
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो चयनकर्ता का पूर्ण समर्थन करता है।
Selector | |||||
---|---|---|---|---|---|
:nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
सीएसएस सिंटेक्स
:nth-of-type(number) {
css declarations;
}
और ज्यादा उदाहरण
उदाहरण
विषम और सम ऐसे कीवर्ड हैं जिनका उपयोग उन बाल तत्वों से मिलान करने के लिए किया जा सकता है जिनका सूचकांक विषम या सम है (पहले बच्चे का सूचकांक 1 है)।
यहां, हम विषम और सम p तत्वों के लिए दो अलग-अलग पृष्ठभूमि रंग निर्दिष्ट करते हैं:
p:nth-of-type(odd)
{
background: red;
}
p:nth-of-type(even)
{
background: blue;
}
उदाहरण
सूत्र का उपयोग करना ( a + b ) । विवरण: a एक चक्र आकार का प्रतिनिधित्व करता है, n एक काउंटर है (0 से शुरू होता है), और b एक ऑफसेट मान है।
यहां, हम उन सभी p तत्वों के लिए एक पृष्ठभूमि रंग निर्दिष्ट करते हैं, जिनका सूचकांक 3 का गुणज है:
p:nth-of-type(3n+0)
{
background: red;
}