Bài 25: Vùng chọn trong CSS

Bộ tổ hợp trong CSS (CSS Combinators)

Bộ chọn CSS có thể có nhiều hơn một bộ chọn. Giữa các bộ chọn đơn giản, chúng ta có thể bao gồm bộ tổ hợp.

Có bốn tổ hợp khác nhau trong CSS:

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

Descendant Selector

Descendant selector khớp với tất cả các phần tử là con của một phần tử được chỉ định.
Ví dụ sau chọn tất cả các phần tử p bên trong phần tử div.
Ví dụ:

div p {
  background-color: yellow;
}

Child Selector (>)

Child Selector chọn tất cả các phần tử là con của một phần tử được chỉ định.
Ví dụ sau chọn tất cả các phần tử p là phần tử con của một phần tử div
Ví dụ:

div > p {
  background-color: yellow;
}

Adjacent Sibling Selector (+)

Adjacent sibling selector là chọn một phần tử nằm sau phần tử khác.
Các phần tử anh/chị/em phải có cùng một phần tử mẹ và liền kề có nghĩa là ngay sau đó.
Ví dụ sau chọn phần tử p đầu tiên được đặt ngay sau phần tử div.
Ví dụ:

div + p {
  background-color: yellow;
}

General Sibling Selector (~)

General sibling selector chọn tất cả các phần tử là anh/chị/em của một phần tử được chỉ định.
Ví dụ sau chọn tất cả các phần tử p là anh/chị/em của phần tử div.
Ví dụ:

div ~ p {
  background-color: yellow;
}

Tất cả các Combinator Selectors trong CSS