Tạo kiểu cho phần tử p rỗng (không có con) với CSS

Bộ chọn :empty

:empty chọn phần tử **không có nội dung con nào** (không có văn bản, không có phần tử con, không có khoảng trắng). Chú ý: khoảng trắng/nâng dòng cũng tính là nội dung.

Ví dụ minh họa

<!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">Đây là văn bản demo. Dưới là đoạn rỗng.</p>
  <p></p> <!-- Thực sự rỗng, không khoảng trắng -->
</body>
</html>

Đoạn <p></p> không có nội dung → khớp :empty → nền cam, rộng 150px. Đoạn có class demo có văn bản → không khớp.