Selector anak

Pelajaran 7 dari 15 dalam kursus Selector CSS di Coddy.

Selector anak adalah jenis selector CSS yang memilih semua elemen yang merupakan anak langsung dari elemen tertentu. Selector anak ditandai dengan tanda lebih besar (>) di antara dua selector.

Contoh:

Perhatikan struktur HTML berikut:

<div class="parent">
   <p>This is a direct child paragraph.</p>
   <div>
       <p>This is an indirect child paragraph.</p>
   </div>
</div>

Untuk menargetkan paragraf anak langsung, kamu bisa menggunakan kombinator anak seperti berikut:

.parent > p {
    color: blue;
}

Dalam contoh ini, hanya paragraf anak langsung yang akan berubah menjadi biru, bukan paragraf yang berada di dalam <div> bagian dalam.

Selector anak juga bisa digunakan untuk menghindari pemberian gaya pada elemen yang bukan anak langsung dari elemen tertentu. Misalnya, kamu bisa menggunakan selector anak untuk memberi gaya merah pada semua tautan yang merupakan anak langsung dari elemen p.

Tantangan

Mudah

Dengan struktur HTML berikut, buat aturan CSS menggunakan kombinator anak untuk memberi warna latar kuning pada item list langsung di dalam elemen <ul>.

Coba sendiri

<html>
<head>
  <title>Child Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  <ul class="list">
    <li>This is a direct list item.</li>
    <div>
        <li>This is an indirect list item.</li>
    </div>
</ul>
</body>
</html>

Semua pelajaran di Selector CSS

1Pengenalan CSS Selectors

Tujuan CSS Selectors Mengapa penting?

4Selector Atribut

Pengantar Selector Atribut Keberadaan dan Nilai Tepat Selector Nilai Atribut Selector Nilai Atribut II Selector Nilai Atribut III

2Selektor Sederhana

Selektor tipe Selektor class Selektor ID Selektor universal

3Selector Kombinator

Selector anakSelector keturunan Selector saudara berdekatan Selector saudara umum

Latihan sendiri: Playground Web