Bộ chọn phần tử con

Bài học 7 trên 15 trong khóa học Bộ chọn CSS của Coddy.

Bộ chọn con là một loại bộ chọn CSS dùng để chọn tất cả phần tử là con trực tiếp của một phần tử được chỉ định. Bộ chọn con được ký hiệu bằng dấu lớn hơn (>) đặt giữa hai bộ chọn.

Ví dụ:

Xét cấu trúc HTML sau:

<div class="parent">
   <p>This is a direct child paragraph.</p>
   <div>
       <p>This is an indirect child paragraph.</p>
   </div>
</div>

Để chọn đoạn văn là con trực tiếp, bạn dùng bộ kết hợp con như sau:

.parent > p {
    color: blue;
}

Trong ví dụ này, chỉ đoạn văn là con trực tiếp chuyển sang màu xanh lam, còn đoạn văn nằm bên trong <div> bên trong thì không.

Bạn cũng có thể dùng bộ chọn con để tránh tạo kiểu cho những phần tử không phải là con trực tiếp của một phần tử được chỉ định. Ví dụ: bạn có thể dùng bộ chọn con để tạo kiểu màu đỏ cho tất cả liên kết là con trực tiếp của phần tử p.

Thử thách

Dễ

Dựa trên cấu trúc HTML sau, hãy tạo một quy tắc CSS dùng bộ kết hợp con để đặt màu nền vàng cho các mục danh sách trực tiếp bên trong phần tử <ul>.

Tự làm thử

<html>
<head>
  <title>Child Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  <ul class="list">
    <li>This is a direct list item.</li>
    <div>
        <li>This is an indirect list item.</li>
    </div>
</ul>
</body>
</html>

Tất cả bài học trong Bộ chọn CSS

1Giới thiệu về CSS Selectors

Mục đích của CSS Selectors Vì sao chúng quan trọng?

4Bộ chọn thuộc tính

Giới thiệu về bộ chọn thuộc tính Sự hiện diện và giá trị chính xác Bộ chọn giá trị thuộc tính Bộ chọn giá trị thuộc tính II Bộ chọn giá trị thuộc tính III

2Bộ chọn đơn giản

Bộ chọn kiểu Bộ chọn lớp Bộ chọn ID Bộ chọn phổ quát

3Bộ chọn kết hợp

Bộ chọn phần tử conBộ chọn phần tử hậu duệ Bộ chọn phần tử anh em liền kề Bộ chọn phần tử anh em tổng quát

Tự luyện tập: Playground Web