Hai trang này thuộc Bài 15, nói về bộ chọn là tổ hợp các phần tử trong CSS (CSS combinator selectors).

Tóm tắt lý thuyết

CSS hỗ trợ 4 kiểu bộ chọn dựa trên quan hệ giữa hai phần tử E và F:

Điểm mấu chốt để phân biệt:

• Dấu cách E F → quan hệ lồng nhau (bên trong).
• Dấu > → chỉ con trực tiếp, không tính cháu.
• Dấu + → chỉ một phần tử em liền ngay sau.
• Dấu ~ → tất cả các em đứng sau (CSS bỏ qua phần text xen giữa, chỉ xét phần tử).

Các ví dụ Hình 15.4 → 15.7 minh hoạ lần lượt cho 4 trường hợp trên với cùng nội dung "Lịch sử CSS".

---

Ba câu hỏi cuối trang đều dựa trên mã HTML của Hình 15.7:

 Lịch sử CSS 
Ý tưởng của CSS do kĩ sư Håkon Wium Lie, người Na Uy,
thiết lập năm 1994 trong khi làm việc với
Tim Berners-Lee tại viện hạt nhân CERN.

Cấu trúc cây của

: bên trong p có 3 phần tử anh em là em (Håkon Wium Lie), strong (Tim Berners-Lee), strong (CERN). Hai phần tử strong đều là con trực tiếp của p và đều đứng sau em.

Với mẫu gốc em ~ strong {color: red;} → cả hai strong (Tim Berners-Lee và CERN) đều màu đỏ.

Câu 1: Thay em ~ strong bằng p > strong

p > strong chọn các phần tử strong là con trực tiếp của p.

Trong cây, cả hai strong (Tim Berners-Lee và CERN) đều là con trực tiếp của p.

Kết quả: cả hai cụm "Tim Berners-Lee" và "CERN" đều được tô màu đỏ — giống hệt kết quả của mẫu gốc em ~ strong.

Câu 2: Thay em ~ strong bằng em + strong

em + strong chọn phần tử strong đứng ngay sau em (anh em liền kề). CSS bỏ qua các đoạn văn bản xen giữa, chỉ xét thứ tự các phần tử.

Thứ tự các phần tử trong p: em → strong (Tim Berners-Lee) → strong (CERN).

• strong Tim Berners-Lee đứng ngay sau em → được chọn → đỏ.
• strong CERN đứng sau một strong khác, không liền kề em → không được chọn.

Kết quả: chỉ "Tim Berners-Lee" có màu đỏ, "CERN" giữ màu đen bình thường. Kết quả này khác mẫu gốc và trùng với Hình 15.6.

Câu 3: Thay em ~ strong bằng p strong

p strong (có dấu cách) là bộ chọn quan hệ con cháu: chọn mọi strong nằm bên trong p, ở bất kỳ cấp nào.

Cả hai strong (Tim Berners-Lee và CERN) đều nằm trong p.

Kết quả: cả hai cụm "Tim Berners-Lee" và "CERN" đều màu đỏ — giống kết quả của mẫu gốc em ~ strong.

---

Tổng hợp nhanh để dễ nhớ:

Chỉ riêng câu 2 (+) cho kết quả khác, vì nó yêu cầu strong phải đứng liền ngay sau em.