Chọn phần con cháu CSS

Chọn phần tử con (descendant selector) còn gọi là chọn phần tử bao gồm.

Chọn lựa con có thể chọn lựa các phần tử là con của một phần tử nào đó.

Chọn lựa phần tử dựa trên ngữ cảnh

Chúng ta có thể định nghĩa chọn lựa con để tạo ra một số quy tắc, để các quy tắc này hoạt động trong một số cấu trúc tài liệu, nhưng không hoạt động trong cấu trúc tài liệu khác.

Ví dụ, nếu bạn muốn chỉ áp dụng phong cách cho các em trong phần tử h1, bạn có thể viết như sau:

h1 em {màu sắc: đỏ;}

Quy tắc này sẽ chuyển văn bản của em là con của phần tử h1 thành màu đỏ. Các văn bản em khác (như đoạn văn hoặc trích dẫn khối) sẽ không được quy tắc này chọn:

<h1>Đây là tiêu đề quan trọng.</h1>
<p>Đây là đoạn văn quan trọng.</p>

Thử ngay

Tất nhiên, bạn cũng có thể đặt một thuộc tính class trên mỗi em mà bạn tìm thấy trong h1, nhưng rõ ràng, chọn lựa con có hiệu suất cao hơn.

Giải thích ngữ pháp

Trong chọn lựa con, bên trái của quy tắc chọn lựa bao gồm hai hoặc nhiều bộ chọn được phân tách bởi khoảng trống. Khoảng trống giữa các bộ chọn là một người kết hợp (combinator). Mỗi người kết hợp có thể hiểu là “... trong ... tìm thấy”、“... là một phần của ...”、“... là con của ...”, nhưng yêu cầu phải đọc bộ chọn từ phải sang trái.

Do đó, bộ chọn h1 em có thể hiểu là “bất kỳ em nào là con của phần tử h1”. Nếu muốn đọc bộ chọn từ trái sang phải, có thể thay bằng cách sau: “Mọi em chứa trong h1 sẽ áp dụng phong cách này cho em đó”.

Áp dụng cụ thể

Chức năng của chọn lựa con rất mạnh mẽ. Với nó, có thể biến những nhiệm vụ không thể thực hiện được trong HTML trở thành khả thi.

Giả sử có một tài liệu, trong đó có một thanh bên và một khu vực chính. Màu nền của thanh bên là xanh dương, màu nền của khu vực chính là trắng, hai khu vực này đều chứa danh sách liên kết. Không thể đặt tất cả các liên kết thành màu xanh dương vì điều này sẽ làm cho các liên kết xanh dương trong thanh bên không thể nhìn thấy.

Giải pháp là sử dụng chọn lựa con. Trong trường hợp này, có thể chỉ định giá trị của thuộc tính class là sidebar cho div chứa thanh bên, và đặt giá trị của thuộc tính class cho khu vực chính là maincontent. Sau đó viết theo phong cách sau:

div.sidebar {màu nền: xanh dương;}
div.maincontent {màu nền: trắng;}
div.sidebar a:link {màu sắc: trắng;}
div.maincontent a:link {màu sắc: xanh dương;}

Về chọn phần con cháu có một khía cạnh dễ bị bỏ qua, đó là khoảng cách giữa hai phần tử có thể là vô hạn.

Ví dụ, nếu viết ul em, cú pháp này sẽ chọn tất cả các phần tử em kế thừa từ phần tử ul, bất kể độ sâu của lớp nhúng.

Do đó, ul em sẽ chọn tất cả các phần tử em trong các dấu hiệu sau:

<ul>
  <li>Điểm mục 1</li>
    <ol>
      <li>Điểm mục 1-1</li>
      <li>Điểm mục 1-2</li>
      <li>Điểm mục 1-3</li>
        <ol>
          <li>Điểm mục 1-3-1</li>
          <li>Điểm mục</li> <em>1-3-2</em></li>
          <li>Điểm mục 1-3-3</li>
        </ol>
      </li>
      <li>Điểm mục 1-4</li>
    </ol>
  </li>
  <li>Điểm mục 2</li>
  <li>Điểm mục 3</li>
</ul>

Thử ngay