पसूडोक्लास nth-of-type
पसूडोक्लास nth-of-type उस एलिमेंट को चुनता है,
जो दिए गए प्रकार का n-वां चाइल्ड है।
यानी, अगर मैं h2:nth-of-type(4) लिखूंगा
- तो पैरेंट में 4-वां h2 मिलेगा (nth-child
से अलग, जो केवल उसी h2 को ढूंढेगा, जो पैरेंट में
4-वां एलिमेंट है)।
सिंटैक्स
cssसेलेक्टर:nth-of-type(संख्या | odd | even | एक्सप्रेशन){
}
वैल्यूज
| वैल्यू | डिस्क्रिप्शन |
|---|---|
| संख्या |
1 से शुरू होने वाला पॉजिटिव नंबर। उस एलिमेंट की संख्या बताता है,
जिसे हम सेलेक्ट करना चाहते हैं।
एलिमेंट्स की नंबरिंग 1 से शुरू होती है।
|
odd |
विषम एलिमेंट्स। |
even |
सम एलिमेंट्स। |
| एक्सप्रेशन |
अक्षर n के साथ स्पेशल एक्सप्रेशन बना सकते हैं,
जो शून्य (एक नहीं) से लेकर अनंत तक सभी पूर्णांकों को दर्शाता है।
जैसे, 2n - मतलब सभी सम नंबर (दूसरे से शुरू करके)।
इसे कैसे समझें? n में 0 से शुरू करके क्रमिक रूप से
नंबर रखते जाएं: अगर n = 0, तो 2n देगा 0 -
ऐसा कोई एलिमेंट नहीं है (एलिमेंट्स की नंबरिंग 1 से है),
अगर n = 1, तो 2n देगा 2 - दूसरा एलिमेंट, अगर n = 2,
2n देगा 4 - चौथा एलिमेंट। अगर 3n लिखेंगे - यह
हर तीसरा एलिमेंट होगा (तीसरे से शुरू करके), और इसी तरह।
|
उदाहरण
h2 ढूंढते हैं, जो पैरेंट में 2-वां h2
है:
html<div>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
</div>cssh2:nth-of-type(2) {
color: red;
}
Результат:
उदाहरण
सभी सम h2 ढूंढते हैं:
html<div>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
</div>cssh2:nth-of-type(even) {
color: red;
}
Результат:
उदाहरण
सभी विषम h2 ढूंढते हैं:
html<div>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
<h2>हेडिंग</h2>
<p>पैराग्राफ</p>
</div>cssh2:nth-of-type(odd) {
color: red;
}
Результат: