Các kết hợp trong CSS

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 CSS3:

• bộ chọn descendant (không gian)
• bộ chọn child (>)
• bộ chọn adjacent sibling (+)
• bộ chọn general sibling (~)

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>:

div p {
    background-color: yellow;
}

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>:

div > p {
    background-color: yellow;
}

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>:

div + p {
    background-color: yellow;
}

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>:

div ~ p {
    background-color: yellow;
}