Bộ chọn con cháu và con trực tiếp

```html <div> <p>Đoạn A</p> <section><p>Đoạn B</p></section> </div> <p>Đoạn C</p> ``` Với div p { color: blue; }, A và B cùng được chọn: cả hai đều nằm trong div. C nằm ngoài div nên không khớp. Thay bằng div > p { color: blue; }, chỉ A được chọn; B có cha trực tiếp là section. Không sửa HTML khi so sánh hai bộ chọn này.

Hai bộ chọn E F và E > F chọn cùng tập khi mọi F nằm trong E đều đã là con trực tiếp của một E phù hợp; không có F chỉ khớp quan hệ con cháu ở cấp sâu hơn. Trong mẫu A–B–C, có A là con trực tiếp vẫn chưa đủ để hai tập giống nhau, vì B tạo khác biệt. Nếu bỏ riêng section cùng đoạn B, cả hai bộ chọn div p và div > p đều chỉ khớp A. Khi so sánh màu hiển thị, cần giữ các quy tắc khác như nhau.