Bộ chọn hậu duệ

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

Bộ chọn đầu tiên là bộ chọn hậu duệ. Ta dùng bộ chọn này khi muốn định kiểu cho các phần tử nằm bên trong một phần tử khác, ngay cả khi chúng nằm sâu trong cấu trúc lồng nhau. Ví dụ, có hai đoạn văn bên trong một vùng chứa.

<div class="container">
    <p>This is a paragraph inside a div.</p&    <section>
        <p>This is a paragraph inside a section that is inside a div.</p>
    </section>
</div>

Bây giờ, hãy dùng bộ chọn hậu duệ để định kiểu cho tất cả đoạn văn bên trong div:

.container p {
    color: blue;
}

Tất cả đoạn văn bên trong thẻ .container sẽ chuyển sang màu xanh lam, kể cả đoạn nằm bên trong phần tử section.

Thử thách

Dễ

Tạo một quy tắc CSS chọn tất cả mục danh sách (<li>) là phần tử con cháu của phần tử có lớp "navigation" và đổi màu chữ của chúng thành màu tím.

Tự làm thử

<html>
<head>
    <title>Descendant Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <ul class="navigation">
        <li>Home</li>
        <li>Team
            <ul>
                <li>Players</li>
                <li>Coaches</li>
            </ul>
        </li>
        <li>Tickets</li>
    </ul>
</body>
</html>