CSS से पैरेंट के एकमात्र <p> एलिमेंट को स्टाइल करें

:only-of-type सेलेक्टर का उपयोग

:only-of-type सेलेक्टर उस एलिमेंट को सिलेक्ट करता है जो अपने पैरेंट के अंदर **अपने टाइप का एकमात्र** एलिमेंट हो। पैरेंट में अन्य टाइप के चाइल्ड्स हो सकते हैं।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:only-of-type {
        background: orange;
        color: white;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This is demo text 1.</p>
    </div>
    <div>
      <p>This is demo text 2.</p>
      <p>This is demo text 3.</p>
      <p>This is demo text 4.</p>
    </div>
  </body>
</html>

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