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

Descendant Selector (Descendant Combinator) chọn element **con cháu** (bất kỳ cấp độ) của một ancestor. Cú pháp: khoảng trắng giữa hai selector.

Cú pháp

ancestor descendant {
  property: value;
}

Ví dụ

/* em bất kỳ cấp nào bên trong ul */
ul em {
  color: #FFFF00;
}

/* strong bất kỳ cấp nào bên trong ol */
ol strong {
  color: #808000;
}

/* Phức tạp: a bên trong nav bên trong header */
header nav a {
  color: white;
}

So sánh Combinator

Combinator	Ký hiệu	Mối quan hệ	Ví dụ
Descendant	(space)	Con cháu (bất kỳ cấp)	`ul li`
Child	`>`	Con trực tiếp (1 cấp)	`ul > li`
Adjacent Sibling	`+`	Anh em kế tiếp ngay	`h1 + p`
General Sibling	`~`	Anh em sau (cùng parent)	`h1 ~ p`

Lưu ý

Descendant selector **không giới hạn độ sâu** (có thể cháu, chắt, chít...).
Hiệu năng: Descendant selector chậm hơn Child selector (browser duyệt qua tất cả ancestor). Với DOM lớn, cân nhắc > hoặc class trực tiếp.
Kết hợp với class/ID: .sidebar .widget h3.