Belajar CSS 3 Lanjutan

Adjacent 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 Adjacent Selector. Sebagai contoh disini, kita akan memilih tag yang berada setelah tag

. Di dalam kode css, kita menuliskan selector p terlebih dahulu, diikuti dengan tanda tambah, dan setelah itu baru diikuti dengan element a.

Kemudian kita lihat ke kode HTML-nya. Disini saya memiliki 3 buah anchor tag, dengan konten link 1, link 2 dan link 3. Kemudian saya memiliki satu buah tag p, yang berada diantara link 1 dan link 2. Perhatikan bahwa seluruh anchor tag dan tag p dalam posisi sejajar dengan tag body sebagai parentnya.

Dan kita lihat hasilnya di samping kanan. Hanya link 2 saja yang mendapatkan background pink, karena anchor tagnya berada tepat setelah tag p. Link 1 tidak mendapatkan background pink karena posisinya berada sebelum tag p. Sedangkan link 3 tidak mendapatkan background pink karena adjacent selector hanya memilih satu buah anchor tag saja ditemukan langsung setelah tag p.

Kita buka kembali source code dari pelajaran sebelumnya. Pada contoh disini, kita akan mencoba untuk memilih paragraf pertama setelah judul kecil. Perhatikan pada browser, disini ada Judul Kecil Pertama. Dan setelah itu ada satu buah paragraf.

Kita lihat ke kode HTML. Perhatikan bahwa Judul Kecil Pertama terletak di dalam tag h2, dan diikuti dengan paragraf di dalam tag p. Tag h2 dan tag p berada di posisi sejajar, dan parent keduanya adalah tag section. Jadi kita bisa memilih tag p dengan menggunakan adjacent selector, yaitu h2 + p.

Kita buka kode css kita. Kita tambahkan selector h2 + p. Lalu kita berikan properti background-color : lightblue;. Kita simpan dan refresh browser.

Sekarang setiap paragraf pertama setelah judul kecil, akan memiliki warna latar belakang biru.

Kita kembali ke kode HTML. Yang perlu diperhatikan disini adalah, selector hanya memilih tag p pertama, yang posisinya sejajar dengan h2, dan terletak setelah h2. Jadi misalkan sebelum tag h2 saya tambahkan tag p baru, misalkan isinya adalah Paragraf Baru. Maka paragraf baru ini tidak terpilih oleh adjacent selector.

Begitu pula apabila paragraf saya pindahkan ke dalam tag h2. Maka posisi paragraf baru akan menjadi anak dari h2, dan hanya bisa dipilih menggunakan descendant selector yang telah kita pelajari pada video sebelumnya. Saya hapus dahulu paragraf barunya.

Dan yang menarik untuk diperhatikan disini, bahwa tag P yang terpilih harus berada langsung setelah tag H2. Kita tidak bisa menaruh tag lain diantara tag P dan tag H2. Sebagai contoh, setelah tag H2 saya tambahkan tag div dengan konten Div Baru. Dan hasilnya tidak ada paragraf yang terpilih untuk mendapatkan warna latar belakang biru. Saya hapus lagi tag div barunya.

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.