Bộ chọn phần tử hậu duệ

Ở chủ đề trước, chúng ta đã tìm hiểu về bộ chọn con trực tiếp, dùng để chọn các phần tử con trực tiếp của một phần tử. Bây giờ, hãy cùng tìm hiểu bộ chọn hậu duệ, được biểu thị bằng khoảng trắng. Bộ chọn hậu duệ cho phép bạn chọn các phần tử nằm bên trong một phần tử khác ở bất kỳ cấp nào, không chỉ các phần tử con trực tiếp.

Cú pháp

selector1 selector2 {
  /* khai báo thuộc tính */
}

Ví dụ:

<html>
<head>
  <title>Combinator</title>
  <style>
    div p {
      color: red;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>
</body>
</html>

Quy tắc CSS ở trên sẽ hiển thị cả hai đoạn văn bằng màu đỏ và có cỡ chữ là 2em.

Bộ chọn này liên quan thế nào đến bộ chọn con trực tiếp?

Bộ chọn hậu duệ tổng quát hơn bộ chọn con trực tiếp. Điều này có nghĩa là bộ chọn hậu duệ khớp với tất cả phần tử hậu duệ của một phần tử được chỉ định, còn bộ chọn con trực tiếp chỉ khớp với các phần tử là hậu duệ trực tiếp của phần tử đó.

Ví dụ, bộ chọn div p khớp với tất cả phần tử p là hậu duệ của phần tử div, kể cả những phần tử p nằm bên trong các phần tử p khác. Bộ chọn div > p chỉ khớp với các phần tử p là hậu duệ trực tiếp của phần tử div.