Belajar CSS 3 Lanjutan

Direct Descendant Selector

Materi ini memiliki 2 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Pada video ini kita akan mempelajari mengenai cara menggunakan Direct Descendant Selector. Sebagai contoh disini, kita akan memilih tag yang berada langsung di dalam tag

. Di dalam kode css, kita menuliskan selectornya dengan element div sebagai parent terlebih dahulu, diikuti dengan tanda lebih besar, dan setelah itu baru diikuti dengan element a. Jadi ada sedikit berbeda dengan descendant selector yang kita pelajari pada video sebelumnya. Decendant Selector hanya menggunakan spasi sebagai pemisah antara
dan , sedangkan untuk Direct Decendant Selector, kita menggunakan tanda lebih besar. Sebagai contoh disini kita memberikan warna latar belakang pink pada tag tersebut.

Kemudian kita lihat ke kode HTML-nya. Disini saya membuat dua buah . Yang pertama berada langsung setelah

dengan konten Anchor Tag. Sedangkan yang kedua berada di dalam

dengan konten All-In-One PC.

Dan kita lihat hasilnya di samping kanan. Hanya anchor tag pertama saja yang diberi warna latar belakang pink, karena berada langsung di dalam

. Sedangkan link All-In-One PC tidak mendapatkan warna latar belakang pink.

Oke, sekarang kita buka lagi kode kita dari pelajaran sebelumnya. Kita lihat lagi ke section pertama kita. Disini adalah judul utama Belajar CSS Lanjutan dan diikuti dengan dua buah paragraf. Pada paragraf pertama terdapat satu buah link. Kita tambahkan satu buah link lagi ya. Kita tambahkan dengan attribute href=”#”. Lalu kita tambahkan tag penutupnya. Simpan dan refresh browser. Sekarang paragraf pertama sudah memiliki dua buah link.

Sebagai contoh pertama, kita akan memberikan warna latar belakang pink pada tag anchor di dalam paragraf. Sebelumnya kita perhatikan dahulu urutan tag dalam kode HTML kita. Yang bisa kita lihat disini, yang pertama adalah tag Body. Kemudian di dalamnya ada tag section, setelah itu tag p, dan di dalam tag p barulah kita menemukan dua buah tag a. Jadi urutannya adalah body, section, p, anchor.

Nah sekarang kita lihat ke kode css. Disini descendant selector dari pelajaran sebelumnya yaitu .judul_utama spasi p. Kita lihat lagi ke kode HTML. Judul_utama adalah nama class pada section ya.

Sekarang dibawahnya kita coba tambahkan direct descendant selector. Kita ketik section diikuti dengan tanda lebih besar, lalu element anchor. Kita isikan dengan property background-color: pink.

Kita simpan dan refresh browser. Tidak ada perubahan ya. Mengapa? Kita perhatikan lagi ke kode HTML. Jawabannya adalah karena tag anchor berada di dalam tag p, bukan tag section. Direct Descendant hanya berlaku apabila tag anchor berada langsung dibawah tag section.

Lain halnya kalau kita menggunakan descendant selector ya. Misalkan kita hapus tanda lebih besarnya, maka browser akan menampilkan link dengan background pink.

Untuk menggunakan Direct Descendant, maka kita mesti mengganti elemen section menjadi p, karena anchor tag berada langsung dibawah tag p. Kita selector-nya menjadi p > a. Kita refresh browser. Dan sudah benar ya.

Jadi selector Direct Descendant akan memilih semua anchor tag yang berada langsung dibawah tag p. Berapapun jumlah anchor tag-nya, semuanya akan terpilih.

Nah, untuk contoh berikutnya, kita lihat bagian Daftar Menu Restoran. Pada saat mempelajari Descendant Selector, kita menggunakan li di dalam li. Sekarang kita coba buat selector li > li, dan kita berikan properti background-color : pink. Kita simpan dan refresh browser.

Tidak ada perubahan ya. Mengapa? Kita lihat lagi ke kode HTML-nya. Ternyata tag

  • bukan berada langsung dibawah tag
  • , melainkan berada dibawah tag
      . Jadi kita ganti selectornya menjadi ul > li.

      Nah sekarang jadinya semua daftar berubah menjadi berwarna latar belakang pink. Bagaimana caranya agar kita bisa memilih hanya daftar pada tingkat kedua saja?

      Kita lihat lagi ke kode HTML. Perhatikan posisi kata Paket. Apabila kita urutkan dari atas, ada ul, li, ul, li. Kita buka kembali css kita dan kita ubah selectornya menjadi ul > li > ul > li.

      Kita simpan dan refresh browser. Sekarang latar belakang pink berada pada daftar tingkat kedua dan tingkat ketiga ya. Padahal yang kita mau hanya tingkat kedua saja. Mengapa tingkat ketiga ikut terpilih? Kita lihat lagi ke kode HTML.

      Nah ternyata daftar tingkat ketiga ikut memenuhi syarat selector kita ya. Kita perhatikan disini ada ul, li, ul, li. Jadi untuk memperbaikinya kita mesti membuat selector tingkat ketiga dan mengembalikan warna latar belakangnya menjadi putih.

      Kita tambahkan selector ul > li > ul > li > ul > li. Lalu kita berikan properti background-color : white. Kita simpan dan refresh browser. Bisa kita lihat bahwa tulisan nama menu seperti Nasi Ayam Bakar sudah menggunakan latar belakang berwarna putih. Namun bullet yang berada di sebelah kirinya masih menggunakan warna belakang pink.Warna bullet ini berada pada elemen ul. Oleh karena itu kita mesti memilih elemen tersebut, dengan cara menambahkan ul > li > ul > li > ul. Lalu kita beri properti background-color : white.

      Nah, sekarang warna daftarnya sudah sesuai dengan yang kita mau.

      Oke, disini kita hanya memberi contoh penggunaan saja ya, untuk direct descendant selector. Sebenarnya properti background-color : pink ini akan lebih efisien kalau kita gabungkan dengan selector li di dalam li yang sudah kita pelajari dalam video sebelumnya. Hasilnya tetap sama ya, dan selectornya lebih sederhana.

      Dan selector ul > li > ul > li > ul > li, bisa kita gabungkan ke selector li li li. Jadi kita bisa pindahkan properti background-color: white. Dan hasilnya tetap sama.

      Jadi sebenarnya dalam contoh ini, yang benar-benar diperlukan hanya satu selector ini, yang fungsinya untuk mengubah warna latar belakang bullet tingkat tiga menjadi putih. Kalau selector ini dihapus, maka warna belakang bulletnya akan menjadi pink.

  • 1. Pendahuluan 16 Menit
    3. Head 13 Menit
    10. Tabel 21 Menit
    1 Jam 2 Menit
    1. Form 15 Menit
    2. Validasi 12 Menit
    3. Input Type 15 Menit
    4. Dropdown 9 Menit
    1 Jam 29 Menit
    9. Pseudo Class 11 Menit
    3 Jam 26 Menit
    2. Lebar/Width 13 Menit
    16. CSS Reset 6 Menit
    2 Jam 21 Menit
    4. Flex-Wrap 10 Menit
    3 Jam 17 Menit
    7. Flex Utility 16 Menit
    8. Operator 28 Menit
    11. Objek String 18 Menit
    4. Scope 10 Menit
    5. Rekursif 10 Menit
    8. Notasi Big O 24 Menit
    4. Prototype 18 Menit
    7. Map 19 Menit
    8. Set 12 Menit
    2. DOM Selector 40 Menit
    7. DOM Traversal 14 Menit
    Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
    Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.