Trong CSS, Combinators (kết hợp selector) cho phép chúng ta chọn các phần tử dựa trên mối quan hệ giữa chúng. Khi viết các quy tắc CSS, việc kết hợp các selector khác nhau giúp chúng ta tạo ra những lựa chọn cụ thể hơn, chỉ định rõ phần tử mà chúng ta muốn áp dụng kiểu. CSS cung cấp bốn loại combinators chính: descendant combinator, child combinator, adjacent sibling combinator, và general sibling combinator.

Trong bài viết này, chúng ta sẽ khám phá từng loại combinators, cách hoạt động và cách sử dụng chúng với ví dụ cụ thể.

1. Descendant Combinator

Descendant combinator (khoảng trắng giữa các selector) cho phép chúng ta chọn tất cả các phần tử con, cháu hoặc các hậu duệ khác của một phần tử tổ tiên (ancestor) trong cây DOM. Các phần tử con không cần phải là con trực tiếp, có thể là các phần tử sâu hơn trong cây DOM.

Cú pháp:

selectorA selectorB {
    /* Các quy tắc CSS áp dụng cho selectorB là hậu duệ của selectorA */
}

Ví dụ:

<style>
.container p {
    color: red;
}
</style>
<div class="container">
    <p>Đoạn văn bản 1</p>
    <div>
        <p>Đoạn văn bản 2</p>
    </div>
</div>

Giải thích:

• Quy tắc trên chọn tất cả các phần tử <p> nằm trong phần tử .container, bao gồm cả những phần tử con trực tiếp và gián tiếp (hậu duệ). Kết quả là cả "Đoạn văn bản 1" và "Đoạn văn bản 2" sẽ có màu đỏ.

2. Child Combinator (Kết hợp con trực tiếp)

Child combinator (>) chỉ chọn các phần tử con trực tiếp (immediate children) của một phần tử tổ tiên. Các phần tử này phải là con ngay lập tức của phần tử được chọn.

Cú pháp:

selectorA > selectorB {
    /* Các quy tắc CSS áp dụng cho selectorB là con trực tiếp của selectorA */
}

Ví dụ:

<style>
.container > p {
    color: blue;
}
</style>
<div class="container">
    <p>Đoạn văn bản 1</p>
    <div>
        <p>Đoạn văn bản 2</p>
    </div>
</div>

Giải thích:

• Quy tắc trên chỉ áp dụng cho các phần tử <p> là con trực tiếp của .container. Kết quả là chỉ "Đoạn văn bản 1" sẽ có màu xanh dương, còn "Đoạn văn bản 2" sẽ không bị ảnh hưởng vì nó là con gián tiếp của .container.

3. Adjacent sibling combinator (Kết hợp phần tử liền kề)

Adjacent sibling combinator (+) chọn phần tử ngay sau một phần tử khác (người anh em liền kề). Cả hai phần tử phải có cùng cấp trong cây DOM.

Cú pháp:

selectorA + selectorB {
    /* Các quy tắc CSS áp dụng cho selectorB là phần tử liền kề sau selectorA */
}

Ví dụ:

<style>
h2 + p {
    color: green;
}
</style>
<div>
    <h2>Tiêu đề 1</h2>
    <p>Đoạn văn bản 1</p>
    <p>Đoạn văn bản 2</p>
</div>

Giải thích:

• Quy tắc trên chọn phần tử <p> ngay sau <h2>. Kết quả là "Đoạn văn bản 1" sẽ có màu xanh lá cây, còn "Đoạn văn bản 2" không bị ảnh hưởng vì nó không liền kề với phần tử <h2>.

4. General sibling combinator (Kết hợp tất cả phần tử anh em)

General sibling combinator (~) chọn tất cả các phần tử anh em (sibling) sau một phần tử khác trong cùng một cấp của cây DOM.

Cú pháp:

selectorA ~ selectorB {
    /* Các quy tắc CSS áp dụng cho tất cả các selectorB là anh em sau selectorA */
}

Ví dụ:

<style>
h2 ~ p {
    color: purple;
}
</style>
<div>
    <h2>Tiêu đề 1</h2>
    <p>Đoạn văn bản 1</p>
    <p>Đoạn văn bản 2</p>
</div>

Giải thích:

• Quy tắc trên chọn tất cả các phần tử <p> sau phần tử <h2> trong cùng một cấp. Kết quả là cả "Đoạn văn bản 1" và "Đoạn văn bản 2" sẽ có màu tím.

5. Kết hợp nhiều combinators

Bạn có thể kết hợp nhiều combinators trong một quy tắc CSS để tạo ra các lựa chọn phức tạp hơn.

Ví dụ:

<style>
.wrapper > .box + .box > p {
    color: orange;
}
</style>
<div class="wrapper">
    <div class="box">
        <p>Đoạn văn bản 1</p>
        <p>Đoạn văn bản 2</p>
    </div>
    <div class="box">
        <p>Đoạn văn bản 3</p>
    </div>
</div>

Giải thích:

• Quy tắc trên chỉ áp dụng cho phần tử <p> trong .box thứ hai (là phần tử liền kề sau .box đầu tiên trong .wrapper). Kết quả là chỉ "Đoạn văn bản 3" có màu cam.

6. Tóm tắt các combinators

7. Kết luận

CSS combinators là một công cụ mạnh mẽ giúp bạn kiểm soát tốt hơn cách áp dụng kiểu cho các phần tử trong HTML. Với sự hiểu biết rõ ràng về cách hoạt động của các combinators, bạn có thể tạo ra những lựa chọn cụ thể và phức tạp, đồng thời tối ưu hóa mã CSS của mình. Hãy kết hợp chúng một cách sáng tạo để xây dựng bố cục trang web đẹp mắt và hiệu quả!