पसूडोक्लास nth-of-type

पसूडोक्लास nth-of-type उस एलिमेंट को चुनता है, जो दिए गए प्रकार का n-वां चाइल्ड है।

यानी, अगर मैं h2:nth-of-type(4) लिखूंगा - तो पैरेंट में 4-वां h2 मिलेगा (nth-child से अलग, जो केवल उसी h2 को ढूंढेगा, जो पैरेंट में 4-वां एलिमेंट है)।

सिंटैक्स

सेलेक्टर: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 है:

<div>
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
</div>

h2:nth-of-type(2) {
	color: red;
}

उदाहरण

सभी सम h2 ढूंढते हैं:

<div>
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
</div>

h2:nth-of-type(even) {
	color: red;
}

उदाहरण

सभी विषम h2 ढूंढते हैं:

<div>
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
	
	<h2>हेडिंग</h2>
	<p>पैराग्राफ</p>
</div>

h2:nth-of-type(odd) {
	color: red;
}