Tạo kiểu cho phần tử p là con duy nhất với CSS

Bộ chọn :only-child

:only-child chọn phần tử là **con duy nhất** của phần tử cha (không có anh chị em nào).

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p:only-child {
      background: orange;
    }
  </style>
</head>
<body>
  <h1>Tiêu đề</h1>
  <div>
    <p>Đoạn văn đơn lẻ trong div này - Có nền cam</p>
  </div>
  <div>
    <p>Đoạn 1 trong div này - Không có nền</p>
    <p>Đoạn 2 trong div này - Không có nền</p>
    <p>Đoạn 3 trong div này - Không có nền</p>
  </div>
</body>
</html>

Chỉ đoạn văn trong div đầu tiên (con duy nhất) có nền cam. Div thứ hai có 3 con p nên không khớp.