CSS 28 – Các kết hợp trong CSS – Combinator

0
190

Quy luật CSS được liên kết với các thành phần trên trang thông qua selectors. Bước liên kết này có rất nhiều cách thực hiện. Các selector thường thấy như element type, class name, ID, và attribute hiện đều được hỗ trợ mạnh mẽ và sử dụng rộng rãi.

Hôm nay, chúng ta sẽ tìm hiểu môi trường trình duyệt hiện nay có ý nghĩa như thế nào với CSS selector, đặc biệt là các selector mới: attribute selector/combinator, cùng một loạt pseudo-class mới. Trong loạt bài viết này, chúng ta sẽ chỉ tập trung vào các selector có hỗ trợ tốt trình duyệt, và có tác dụng đáng kể cho công việc.

Combinators là gì?

Combinator (tổ hợp) là chuỗi ký tự thể hiện mối quan hệ giữa các selector được kết hợp. Khi sử dụng combinator, ta có được sản phẩm có tên gọi là selector phức hợpSelector phức hợp có thể, trong một số trường hợp, là cách xác định style ngắn gọn nhất.

Một combinator giải thích cho mối liên hệ giữa các bộ chọn trong CSS. Một bộ chọn CSS có thể chứa nhiều hơn một bộ chọn đơn giản. Giữa các bộ chọn đơn giản, chúng có thể bao gồm một combinator (kết hợp). Đây là bốn cách kết hợp khác nhau trong CSS:

  • Descendant combinator (tổ hợp thừa hưởng), hoặc ký tự khoảng trắng
  • Child combinator (tổ hợp con), hoặc >
  • Adjacent sibling combinator (tổ hợp anh chị em kề sát), hoặc +
  • General sibling combinator (tổ hợp anh chị em chung chung), hoặc ~

Cùng tìm hiểu từng combinator thông qua các ví dụ cụ thể nhé.

Bộ chọn Descendant

Bộ chọn descendant nối tất cả các phần tử là hậu duệ (trong quá trình phân nhánh) của phần tử được chỉ định. Ví dụ dưới đây chọn tất cả phần tử <p> bên trong phần tử <div>:

Bộ chọn Child

Bộ chọn child chọn tất cả các phần tử là phần tử con trực tiếp của phần tử được chỉ định. Ví dụ dưới đây chọn tất cả  phần tử <p> là phần tử con trực tiếp của phần tử <div>:

Bộ chọn Adjacent Sibling

Bộ chọn adjacent sibling chọn tất cả phần tử lân cận của phần tử được chỉ định. Các phần tử lân cận phải tương tự như phần tử cha và và “lân cận” có nghĩa là “ngay sau”.

Ví dụ dưới đây chọn tất cả phần tử <p> ở ngay sau phần tử <div>:

Bộ chọn General Sibling

Bộ chọn general sibling chọn tất cả phần tử “anh chị em” của phần tử được chỉ định.

Ví dụ dưới đây lựa chọn tất cả phần tử <p> là “anh chị em” của phần tử <div>:

Ví dụ tổng quát

Kết luận

Như vậy các bạn đã tìm hiểu xong về Combinator trong CSS, các cách kết hợp trong CSS để trang trí các thành phần như thế nào.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây