Bộ chọn hậu duệ (Descendant Selector) trong CSS

Bộ chọn hậu duệ (Descendant Selector)

Bộ chọn div p (cách nhau bởi khoảng trắng) chọn **tất cả** phần tử <p> là con cháu (bất kỳ cấp độ nào) của <div>.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div p {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div>
    <p>Đoạn 1 trong div (con trực tiếp) - Có nền cam</p>
    <p>Đoạn 2 trong div (con trực tiếp) - Có nền cam</p>
    <section>
      <p>Đoạn 3 trong section trong div (cháu) - CÓ nền cam</p>
    </section>
  </div>
  <p>Đoạn 4 ngoài div - Không có nền</p>
</body>
</html>

Khác với bộ chọn con (div > p) chỉ chọn con cấp 1. Hậu duệ bao gồm con, cháu, chắt... mọi cấp độ lồng nhau.