Selector Keturunan

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 2 dari 43.

Pemilih pertama adalah pemilih turunan. Kita menggunakannya saat ingin memberi gaya pada elemen yang berada di dalam elemen lain, meskipun bersarang jauh di dalam. Sebagai contoh, ada dua paragraf di dalam sebuah wadah.

<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>

Sekarang, mari gunakan selector turunan untuk memberi gaya pada semua paragraf di dalam div:

.container p {
    color: blue;
}

Semua paragraf di dalam div .container akan berubah menjadi biru, termasuk paragraf yang berada di dalam elemen section.

Tantangan

Mudah

Buat aturan CSS yang memilih semua item daftar (<li>) yang merupakan turunan dari elemen dengan kelas "navigation", lalu mengubah warna teksnya menjadi ungu.

Coba sendiri

<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>