CSS Combinators là một trong những khái niệm nền tảng cơ bản nhưng cực kỳ quan trọng trong việc xây dựng hệ thống CSS hiệu quả, dễ bảo trì và mở rộng. Dù bạn chưa có nhiều kinh nghiệm hay là một Senior Frontend Developer, việc nắm vững cách sử dụng các combinator sẽ giúp bạn viết CSS rõ ràng, chính xác và tối ưu hơn.
CSS Combinators là gì?
CSS combinators là các ký hiệu dùng để mô tả mối quan hệ giữa các selectors trong CSS, cho phép bạn chọn các phần tử dựa trên vị trí và quan hệ của chúng trong cấu trúc DOM. Một selector trong CSS có thể chứa nhiều simple selectors, và combinators đứng giữa các selectors này để chỉ định cách chúng liên kết với nhau.
Có 4 loại combinators chính trong CSS:
- Descendant combinator (khoảng trắng)
- Child combinator (>)
- Adjacent sibling combinator (+)
- General sibling combinator (~)
1. Descendant Combinator ( )
Descendant combinator chọn tất cả các phần tử là con cháu (không giới hạn cấp độ) của phần tử cha được chỉ định. Đây là combinator phổ biến nhất và cũng cần kiểm soát phạm vi chặt chẽ nhất
Cú pháp:
selector1 selector2 { /* style */
}
Ví dụ:
div p { color: red;
} Trong ví dụ này, tất cả các thẻ
nằm bên trong thẻ
2. Child Combinator (>)
Combinator > dùng để chọn phần tử con trực tiếp của một phần tử cha. Đây là công cụ quan trọng khi bạn muốn style áp dụng một cách chính xác, tránh ảnh hưởng đến các cấp sâu hơn.
Cú pháp:
selector1 > selector2 { /* style */
} Ví dụ:
div > p { background-color: yellow;
}
Chỉ những thẻ <p> là con trực tiếp của <div> mới được tô nền vàng, còn các phần tử <p> nằm sâu hơn trong cây DOM thì không. Đây là cách phổ biến để tránh "đổ style" vào những phần tử không mong muốn khi cấu trúc DOM phức tạp.
3. Adjacent Sibling Combinator (+)
Combinator + chọn phần tử anh em liền kề (immediately following sibling) — nghĩa là phần tử xuất hiện ngay sau phần tử được chỉ định, cùng cấp trong DOM.
selector1 + selector2 { /* style */
}
Ví dụ:
h3 + p { font-weight: bold; color: blue;
}
Chỉ những thẻ <p> đứng ngay sau thẻ <h3> mới được áp dụng style chữ đậm và màu xanh. Đây là combinator cực kỳ hữu ích khi bạn muốn áp dụng style theo ngữ cảnh, chẳng hạn như khoảng cách sau tiêu đề, spacing sau hình ảnh, v.v.
4. General Sibling Combinator (~)
Combinator ~ chọn tất cả phần tử cùng cấp nằm phía sau một phần tử khác. Khác với +, combinator này không yêu cầu phải là phần tử liền kề.
Cú pháp:
selector1 ~ selector2 { /* style */
}
Ví dụ:
h3 ~ p { color: green;
}
Tất cả các thẻ <p> cùng cấp đứng sau một thẻ <h3> sẽ có chữ màu xanh lá, dù có các phần tử khác xen giữa.
Kết hợp nhiều combinators
Bạn có thể kết hợp nhiều combinators để tạo ra các selector phức tạp và chính xác hơn.
Ví dụ:
div > h3 + p { background-color: lightgray;
}
Selector này chọn các thẻ <p> mà:
- Là phần tử đứng ngay sau <h3>,
- <h3> là con trực tiếp của <div>.
Tổng kết
Tại sao Developer cần nắm vững CSS Combinators?
- Tối ưu hiệu suất CSS: Chọn đúng phần tử giúp trình duyệt xử lý CSS nhanh hơn, tránh việc áp dụng style không cần thiết.
- Tăng tính maintainable: CSS rõ ràng, logic, dễ đọc và dễ chỉnh sửa.
- Kiểm soát layout phức tạp: Khi làm việc với giao diện phức tạp, combinators giúp bạn target chính xác các phần tử cần style mà không cần thêm class hoặc id thừa thãi.
Nắm vững và vận dụng linh hoạt CSS combinators là kỹ năng không thể thiếu đối với Developer, giúp bạn tạo ra các stylesheet hiệu quả, chuyên nghiệp và dễ dàng mở rộng trong các dự án thực tế.