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.