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

:first-child सेलेक्टर का उपयोग

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

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:first-child {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>This is demo text.</p>
    <div>
      <p>This is demo text, with the first child of its parent div.</p>
      <p>This is demo text, but not the first child.</p>
    </div>
  </body>
</html>

व्याख्या:

• बॉडी का पहला चाइल्ड <h1> है, इसलिए बॉडी में कोई p:first-child नहीं।
• <div> का पहला चाइल्ड <p> है, इसलिए वह स्टाइल होगा।
• दूसरा <p> पहला चाइल्ड नहीं है।