Bộ chọn con

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 3 trên 43.

Bộ chọn con ( > ) dùng để định kiểu cho các phần tử là con trực tiếp của một phần tử khác. Khác với bộ chọn hậu duệ, bộ chọn này chỉ chọn các phần tử con trực tiếp, không chọn các phần tử ở sâu hơn.

Ví dụ:

<div class="parent">
  <p>This is a direct child</p>
  <section>
    <p>This is a grandchild (not a direct child)</p>
  </section>
</div>

Chỉ áp dụng kiểu cho các phần tử con trực tiếp:

.parent > p {
  color: red;
}

Sau khi áp dụng CSS này, chỉ đoạn văn đầu tiên "This is a direct child" có màu đỏ. Đoạn văn thứ hai sẽ không bị ảnh hưởng vì nó không phải là phần tử con trực tiếp của div có lớp "parent".

Thử thách

Dễ

Bạn có một .team-container chứa một số phần dành cho các đội. Nhiệm vụ của bạn là:

Dùng bộ chọn con để tạo kiểu cho các phần tử div con trực tiếp bên trong .team-container với nền xanh lam nhạt, khoảng đệm 10px và lề 5px.
Dùng bộ chọn con để tạo kiểu cho các phần tử <h3> trực tiếp bên trong các phần tử div .team với màu xanh lá và cỡ chữ 20px.

Tự làm thử

<html>
<head>
    <title>Child Selector</title>
    <style>
       /* Write CSS rules here */
       
    </style>
</head>
<body>
    <div class="team-container">
        <div class="team">
            <h3>Basketball Team</h3>
            <ul>
                <li>LeBron James</li>
                <li>Stephen Curry</li>
                <li>Kevin Durant</li>
            </ul>
        </div>
        <div class="team">
            <h3>Football Team</h3>
            <ul>
                <li>Tom Brady</li>
                <li>Patrick Mahomes</li>
                <li>Davante Adams</li>
            </ul>
        </div>
        <div class="team">
            <h3>Soccer Team</h3>
            <ul>
                <li>Lionel Messi</li>
                <li>Cristiano Ronaldo</li>
                <li>Neymar Jr.</li>
            </ul>
        </div>
    </div>
</body>
</html>