Bộ chọn hậu duệ (Descendant Selector - khoảng trắng)
Bộ chọn element element (cách nhau bởi khoảng trắng) chọn **tất cả phần tử con cháu** ở mọi cấp độ bên trong phần tử cha. Không yêu cầu con trực tiếp.
Cú pháp
ancestor descendant {
/* Style cho TẤT CẢ descendant khớp */
}Ví dụ minh họa
<!DOCTYPE html>
<html>
<head>
<style>
div p {
color: white;
background-color: blue;
}
</style>
</head>
</head>
<body>
<h1>Demo Website</h1>
<h2>Fruits</h2>
<p>Fruits are good for health.</p> <!-- Không trong div -->
<div>
<p>This is demo text.</p> <!-- Con trực tiếp -->
<section>
<p>Nested in section.</p> <!-- Cháu (cấp 2) -->
</section>
</div>
</body>
</html>Kết quả
Cả 2 thẻ `
` bên trong `
` đều được xanh nền: con trực tiếp và cháu trong ``. Thẻ `
` đầu tiên (ngoài div) không ảnh hưởng.
So sánh 4 bộ chọn quan hệ (Combinators)
| Selector | Tên | Ký hiệu | Phạm vi |
|---|---|---|---|
A B | Descendant | Khoảng trắng | Tất cả B bên trong A (mọi cấp) |
A > B | Child | > | Chỉ B con trực tiếp của A |
A + B | Adjacent Sibling | + | B ngay sau A (cùng cấp, 1 phần tử) |
A ~ B | General Sibling | ~ | Tất cả B sau A (cùng cấp) |
Khi nào dùng Descendant Selector?
- Styling nội dung bài viết:
.article p,.article h2. - Theme component:
.card .title,.card .content. - Tránh lạm dụng quá sâu (performance & maintainability).
Performance tip
Trình duyệt đọc selector **từ phải sang trái**. .container .item .title tìm tất cả `.title` trước, rồi lọc cha. Hạn chế lồng sâu > 3 cấp.