Selector Anak

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

Selector anak ( > ) digunakan saat kita ingin memberi gaya pada elemen yang merupakan anak langsung dari elemen lain. Berbeda dengan selector turunan, selector ini hanya memilih anak langsung, bukan elemen yang lebih dalam.

Contoh:

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

Terapkan gaya hanya pada elemen turunan langsung:

.parent > p {
  color: red;
}

Setelah menerapkan CSS ini, hanya paragraf pertama "This is a direct child" yang akan berwarna merah. Paragraf kedua tidak akan terpengaruh karena bukan anak langsung dari div dengan class "parent".

Tantangan

Mudah

Kamu memiliki .team-container yang berisi beberapa bagian tim. Tugasmu adalah:

Gunakan selector anak untuk memberi gaya pada elemen div anak langsung di dalam .team-container dengan latar belakang biru muda, padding 10px, dan margin 5px.
Gunakan selector anak untuk memberi gaya pada elemen <h3> langsung di dalam div .team dengan warna hijau dan ukuran font 20px.

Coba sendiri

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