CSS :nth-last-child(n) सेलेक्टर की भूमिका

:nth-last-child(n) सेलेक्टर का उपयोग

:nth-last-child(n) सेलेक्टर पैरेंट के अंतिम चाइल्ड से गिनती करके nth चाइल्ड को सिलेक्ट करता है, चाहे उसका टाइप कुछ भी हो। यह :nth-last-of-type से अलग है जो केवल उसी टाइप के एलिमेंट्स गिनता है।

उदाहरण

यहां 6 पैराग्राफ हैं, और 4th लास्ट चाइल्ड (यानी 3rd पैराग्राफ) को स्टाइल किया गया है।

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:nth-last-child(4) {
        background: blue;
        color: white;
      }
    </style>
  </head>
  <body>
    <p>This is demo text 1.</p>
    <p>This is demo text 2.</p>
    <p>This is demo text 3.</p>
    <p>This is demo text 4.</p>
    <p>This is demo text 5.</p>
    <p>This is demo text 6.</p>
  </body>
</html>

सूत्र: n के रूप में 2n (सम), 2n+1 (विषम), 3n+2 आदि का उपयोग पैटर्न के लिए किया जा सकता है।