CSS चाइल्ड सेलेक्टर

चाइल्ड कॉम्बिनेटर (>) का उपयोग

चाइल्ड सेलेक्टर parent > child केवल उन एलिमेंट्स को सिलेक्ट करता है जो निर्दिष्ट पैरेंट के **तत्काल (डायरेक्ट) चाइल्ड** होते हैं। यह डिसेंडेंट सेलेक्टर (स्पेस) से अलग है जो सभी नेस्टेड डिसेंडेंट्स को सिलेक्ट करता है।

सिंटैक्स

div > p

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      div > p {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div>
      <p>Para 1 in the div.</p>
      <!-- This is not a Child -->
      <span><p>Para 2 in the div.</p></span>
    </div>
    <p>Para 3 outside the div.</p>
  </body>
</html>

परिणाम: केवल "Para 1 in the div." स्टाइल होगा, क्योंकि यह <div> का डायरेक्ट चाइल्ड है। "Para 2" एक <span> के अंदर है, इसलिए डायरेक्ट चाइल्ड नहीं है।