CSS Descendant Selector: Bộ chọn con cháu

Bộ chọn phần tử con cháu (descendant selector) trong CSS được dùng để chọn tất cả các phần tử con cháu (cấp bất kỳ) của phần tử đầu tiên khớp với bộ chọn thứ hai.

Cú pháp

element element {
    /* declarations */
}

Khoảng trắng giữa hai selector biểu thị quan hệ "con cháu" (descendant), không nhất thiết là con trực tiếp (child).

Ví dụ 1: Lồng div nhiều cấp

<!DOCTYPE html>
<html>
<head>
<style>
div {
    float: right;
    margin: 25px;
    padding: 5px;
    width: 80px;
    height: 80px;
    border: solid aqua;
}
div div {
    border-color: blue;
    border-radius: 50%;
}
div div div {
    border-color: orange;
    border-radius: unset;
}
</style>
</head>
<body>
<div>
    <div>
        <div></div>
    </div>
</div>
</body>
</html>

Kết quả: Ba div lồng nhau với border màu khác nhau: aqua (cấp 1), blue + bo tròn (cấp 2), orange + vuông (cấp 3).

Ví dụ 2: Danh sách lồng nhau

<!DOCTYPE html>
<html>
<head>
<style>
li li {
    background-color: lightsteelblue;
}
</style>
</head>
<body>
<ol>
    <li>Cấp 1</li>
    <ul>
        <li>Cấp 2
            <ul>
                <li>Cấp 3</li>
            </ul>
        </li>
    </ul>
    <li>Cấp 1</li>
</ol>
</body>
</html>

Kết quả: Chỉ các li là con cháu của li khác (cấp 2, cấp 3) mới có nền xanh nhạt. li cấp 1 không bị ảnh hưởng.

So sánh với Child Selector (>)

Ứng dụng thực tế

.sidebar a { color: blue; }        /* Tất cả link trong sidebar */
.nav > li { display: inline-block; } /* Chỉ li cấp 1 của .nav */
.article h2 { margin-top: 2rem; }    /* Tất cả h2 trong bài viết */