पseudoclass nth-last-child

पseudoclass nth-last-child उस तत्व का चयन करता है जो मूल तत्व का n-वां संतान तत्व है, अंत से गिनती करते हुए। यह nth-child के समान ही व्यवहार करता है, केवल गिनती अंत से की जाती है।

वाक्य - विन्यास

cssचयनकर्ता:nth-last-child(संख्या | odd | even | अभिव्यक्ति) {
  
}

मान

मान	विवरण
संख्या	`1` से शुरू होने वाली एक धनात्मक संख्या। उस तत्व की संख्या निर्दिष्ट करती है, जिसे हम एक्सेस करना चाहते हैं। तत्वों की संख्या `1` से शुरू होती है।
`odd`	विषम तत्व।
`even`	सम तत्व।
अभिव्यक्ति	अक्षर n के साथ विशेष अभिव्यक्तियाँ बना सकते हैं, जो शून्य (एक नहीं) से लेकर अनंत तक सभी पूर्णांकों को दर्शाता है। इस प्रकार, `2n` - मतलब सभी सम संख्या (दूसरे से शुरू)। इसे कैसे समझें? `n` में क्रमिक रूप से `0` से शुरू करके संख्याएँ डालते हैं: यदि n = 0, तो 2n, 0 देगा - ऐसा कोई तत्व नहीं है (तत्वों की संख्या 1 से शुरू), यदि n = 1, तो 2n, 2 देगा - दूसरा तत्व, यदि n = 2, 2n, 4 देगा - चौथा तत्व। यदि 3n लिखा जाए - यह हर तीसरा तत्व होगा (तीसरे से शुरू), और इसी तरह।

उदाहरण

इस उदाहरण में, हम उस li को लाल रंग का बनाएंगे जो अंत से 4-वां संतान तत्व है अपने मूल तत्व का:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-last-child(4) {
  color: red;
}

Результат:

उदाहरण

अब हम अंत से सभी सम li को लाल बनाएंगे:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-last-child(even) {
  color: red;
}

Результат:

उदाहरण

अब हम अंत से सभी विषम li को लाल बनाएंगे:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-last-child(odd) {
  color: red;
}

Результат:

उदाहरण

अब हम अंत से हर तीसरे li को लाल बनाएंगे:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-last-child(3n) {
  color: red;
}

Результат: