CSS से बिना चाइल्ड वाले <p> एलिमेंट को स्टाइल करें

:empty सेलेक्टर का उपयोग

:empty सेलेक्टर उन एलिमेंट्स को सिलेक्ट करता है जिनके **कोई चाइल्ड न हों** (न टेक्स्ट नोड, न एलिमेंट नोड, न कमेंट)। यहां तक कि व्हाइटस्पेस भी इसे "नॉन-एम्प्टी" बना देता है।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.demo {
        width: 300px;
        height: 20px;
        background: gray;
      }
      p:empty {
        width: 150px;
        height: 20px;
        background: orange;
      }
    </style>
  </head>
  <body>
    <p class="demo">This is demo text. Below is empty text.</p>
    <p></p>
  </body>
</html>

दूसरा <p></p> खाली है, इसलिए यह नारंगी और छोटा (150px) होगा। पहला ग्रे और 300px होगा।