Các bộ chọn kết hợp

1. Các loại bộ chọn kết hợp

Bộ chọn kết hợp trong CSS cho phép chọn các phần tử dựa trên vị trí phân cấp của chúng so với các phần tử khác. Đây là công cụ hữu ích để áp dụng style cho các phần tử phụ thuộc ngữ cảnh hoặc khi cần style các phần tử trong cấu trúc phức tạp. Bộ chọn kết hợp là công cụ mạnh để chọn chính xác khi một lớp hoặc định danh không đủ. Hãy xem xét các loại bộ chọn kết hợp cơ bản trong CSS, bao gồm bộ chọn descendant, bộ chọn con, bộ chọn phần tử liền kề, và bộ chọn phần tử cùng cấp.

Bộ chọn kết hợp trong CSS bao gồm các cách chọn phần tử khác nhau, dựa trên phân cấp HTML. Các loại cơ bản của bộ chọn kết hợp:

• Bộ chọn descendant (Descendant Selector): chọn các phần tử nằm bên trong một phần tử khác, ở bất kỳ mức lồng nhau nào.
• Bộ chọn con (Child Selector): chỉ chọn các phần tử con trực tiếp (ngay gần) của một phần tử xác định.
• Bộ chọn phần tử liền kề (Adjacent Sibling Selector): chọn phần tử ngay lập tức đứng sau một phần tử khác cùng cấp.
• Bộ chọn phần tử cùng cấp (General Sibling Selector): chọn tất cả các phần tử cùng cấp, đứng sau một phần tử được chỉ định.

Mỗi loại bộ chọn này phù hợp với các trường hợp khác nhau và cho phép chọn chính xác phần tử dựa trên vị trí của chúng trên trang.

2. Bộ chọn descendant (Descendant Selector)

Bộ chọn descendant chọn tất cả phần tử bên trong một phần tử khác bất kể mức lồng nhau. Nó được viết bằng dấu cách giữa các bộ chọn. Kiểu bộ chọn này hữu ích khi cần style các phần tử bên trong một phần tử khác, ví dụ, tất cả <p> bên trong <div> với một lớp cụ thể.

.container p {
  color: blue;
}

<div class="container">
  <p>Nội dung này sẽ có màu xanh, bởi vì nó nằm trong container.</p>
  <div>
    <p>Nội dung này cũng sẽ có màu xanh.</p>
  </div>
</div>
<p>Nội dung này sẽ không thay đổi, vì nó không nằm trong container.</p>

Tại đây, bộ chọn .container p sẽ chọn tất cả các phần tử <p> bên trong phần tử với lớp container, bao gồm các phần tử ở bất kỳ mức lồng nhau.

3. Bộ chọn con (Child Selector)

Bộ chọn con chỉ chọn các phần tử con trực tiếp của một phần tử. Nó được viết sử dụng ký hiệu > giữa các bộ chọn. Bộ chọn này hữu ích khi muốn áp dụng style chỉ cho các phần tử ở mức lồng đầu tiên và không ảnh hưởng đến các mức lồng sâu hơn.

      
  .container > p {
    font-weight: bold;
  }
      
    

      
  <div class="container">
    <p>Nội dung này sẽ in đậm.</p>
    <div>
      <p>Nội dung này sẽ không in đậm, vì nó không phải là con trực tiếp của container.</p>
    </div>
  </div>
      
    

Tại đây, chỉ <p> đầu tiên sẽ được in đậm, bởi vì nó là con trực tiếp của .container, trong khi <p> lồng sâu hơn sẽ không thay đổi.

4. Bộ chọn phần tử liền kề (Adjacent Sibling Selector)

Bộ chọn phần tử liền kề chọn phần tử ngay lập tức đứng sau một phần tử khác cùng cấp. Bộ chọn này được biểu thị bằng ký hiệu + giữa các bộ chọn và hữu ích để áp dụng style cho phần tử ngay sau một phần tử khác, ví dụ, đoạn văn đầu tiên theo sau tiêu đề.

      
  h2 + p {
    color: green;
  }
      
    

      
  <h2>Tiêu đề</h2>
  <p>Nội dung này sẽ có màu xanh lá, vì nó là phần liền kề với h2.</p>
  <p>Nội dung này sẽ không thay đổi, vì nó không phải là phần liền kề với h2.</p>
      
    

Tại đây, bộ chọn h2 + p chỉ thay đổi màu sắc của đoạn văn <p> đầu tiên ngay sau <h2>.

5. Bộ chọn phần tử cùng cấp (General Sibling Selector)

Bộ chọn phần tử cùng cấp chọn tất cả các phần tử trên cùng cấp, đứng sau một phần tử được chỉ định, bất kể có phần tử khác xen giữa hay không. Bộ chọn này được biểu thị bằng ký hiệu ~ giữa các bộ chọn.

      
  h2 ~ p {
    font-style: italic;
  }
      
    

      
  <h2>Tiêu đề</h2>
  <p>Nội dung này sẽ nghiêng.</p>
  <div>
    <p>Nội dung này cũng sẽ nghiêng, vì nó là phần tử cùng cấp với h2.</p>
  </div>
      
    

Trong ví dụ này, bộ chọn h2 ~ p chọn tất cả các phần tử <p> đứng sau <h2> cùng cấp, bất kể có phần tử xen giữa hay không.

6. Ví dụ sử dụng tất cả bộ chọn kết hợp

Dưới đây là một ví dụ về HTML và CSS minh họa tất cả các bộ chọn kết hợp để chọn các phần tử tùy thuộc vào vị trí của chúng trên trang.

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Ví dụ bộ chọn kết hợp CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Đoạn này là descendant và con trực tiếp của .container.</p>
    <div>
      <p>Đoạn này chỉ là descendant, không phải con trực tiếp của .container.</p>
    </div>
  </div>
  <h2>Tiêu đề</h2>
  <p>Đoạn này là phần tử liền kề với h2.</p>
  <div>Block này không ảnh hưởng đến các phần tử p tiếp theo.</div>
  <p>Đoạn này là phần tử cùng cấp với h2.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Ví dụ bộ chọn kết hợp CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Đoạn này là descendant và con trực tiếp của .container.</p>
    <div>
      <p>Đoạn này chỉ là descendant, không phải con trực tiếp của .container.</p>
    </div>
  </div>
  <h2>Tiêu đề</h2>
  <p>Đoạn này là phần tử liền kề với h2.</p>
  <div>Block này không ảnh hưởng đến các phần tử p tiếp theo.</div>
  <p>Đoạn này là phần tử cùng cấp với h2.</p>
</body>
</html>

/* Bộ chọn descendant */
.container p {
  color: blue;
}

/* Bộ chọn con */
.container > p {
  font-weight: bold;
}

/* Bộ chọn phần tử liền kề */
h2 + p {
  color: green;
}

/* Bộ chọn phần tử cùng cấp */
h2 ~ p {
  font-style: italic;
}