Bộ kết hợp CSS
Bộ kết hợp CSS
Bộ tổ hợp là thứ giải thích mối quan hệ giữa các bộ chọn.
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 ta có thể bao gồm một bộ tổ hợp.
Có bốn tổ hợp khác nhau trong CSS:
- bộ chọn con cháu (dấu cách)
- bộ chọn con (>)
- bộ chọn anh chị em kế cận (+)
- bộ chọn anh chị em chung (~)
Bộ chọn con cháu
Bộ chọn hậu duệ 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 các phần tử <div>:
Thí dụ
div p {
background-color: yellow;
}
Bộ chọn con (>)
Bộ chọn con 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à con của phần tử <div>:
Thí dụ
div > p {
background-color: yellow;
}
Bộ chọn Anh chị em kế cận (+)
Bộ chọn anh chị em liền kề được sử dụng để chọn một phần tử nằm ngay sau một phần tử cụ thể 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 đây chọn phần tử <p> đầu tiên được đặt ngay sau phần tử <div>:
Thí dụ
div + p {
background-color: yellow;
}
Bộ chọn anh chị em chung (~)
Bộ chọn anh chị em chung chọn tất cả các phần tử là anh chị em tiếp theo của một phần tử được chỉ định.
Ví dụ sau đây chọn tất cả các phần tử <p> là anh chị em tiếp theo của các phần tử <div>:
Thí dụ
div ~ p {
background-color: yellow;
}
Tất cả các bộ chọn bộ kết hợp CSS
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |