CSS :only-child सेलेक्टर की भूमिका

:only-child सेलेक्टर का उद्देश्य

:only-child सेलेक्टर उस एलिमेंट को टार्गेट करता है जो अपने पैरेंट का **एकमात्र चाइल्ड** हो (किसी भी टाइप का कोई अन्य चाइल्ड न हो)।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:only-child {
        background: orange;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <div>
      <p>This is a paragraph.</p>
    </div>
    <div>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
    </div>
  </body>
</html>

पहले <div> में केवल एक <p> है (कोई अन्य चाइल्ड नहीं), इसलिए यह स्टाइल होगा। दूसरे <div> में तीन <p> हैं, इसलिए कोई भी स्टाइल नहीं होगा।