จัดสไตล์ p ที่ไม่มีลูกด้วย CSS

Pseudo-class :empty

ใช้ :empty เลือกองค์ประกอบที่ไม่มีเนื้อหาใดๆ เลย (รวม text node ด้วย)

ตัวอย่าง

<!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>