Bộ chọn con (Child Selector) trong CSS

Bộ chọn con trực tiếp (>)

Bộ chọn div > p chỉ chọn các phần tử <p> là **con trực tiếp** của <div>, không chọn cháu, chắt...

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>
    <!-- Không phải con trực tiếp -->
    <span><p>Đoạn 2 trong div (cháu, trong span) - Không có nền</p></span>
  </div>
  <p>Đoạn 3 ngoài div - Không có nền</p>
</body>
</html>

Chỉ "Đoạn 1" có nền cam. "Đoạn 2" bị lồng trong <span> nên không phải con trực tiếp của div. "Đoạn 3" ngoài div.