Selector Keturunan

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

Selector pertama adalah selector turunan. Kita menggunakannya saat ingin memberi gaya pada elemen yang berada di dalam elemen lain, meskipun tersarang 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, bahkan paragraf yang berada di dalam elemen section.

Tantangan

Mudah

Buat aturan CSS yang memilih semua item list (<li>) yang merupakan turunan dari elemen dengan class "navigation" dan 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>