SELEKTOR ADJACENT SIBLING

Selektor adjacent sibling dalam CSS memungkinkan kamu untuk memilih elemen yang berada langsung setelah elemen lain tertentu, yang kedua elemen tersebut memiliki orangtua yang sama. Selektor ini menggunakan simbol + sebagai penunjuk.

Sintaksis

Berikut ini adalah sintaksis dasar dari selektor adjacent sibling:

element+element {
    style properties
}

Elemen pertama dalam sintaksis ini adalah elemen ‘referensi’, sementara elemen kedua adalah elemen ‘target’ yang akan diterapkan gaya CSS.

Contoh Penggunaan

Berikut ini adalah contoh penggunaan dari selektor adjacent sibling.

Misalkan kamu memiliki struktur HTML berikut:

<div>
    <p>Paragraf 1</p>
    <p>Paragraf 2</p>
    <p>Paragraf 3</p>
</div>

Kamu bisa menggunakan selektor adjacent sibling untuk memberikan gaya khusus pada paragraf yang berada langsung setelah paragraf pertama. Berikut ini adalah contoh kodenya:

p+p {
    color: red;
}

Dalam kode di atas, paragraf 2 dan 3 memilih gaya karena mereka berada langsung setelah paragraf lainnya. Paragraf 1 tidak mendapatkan gaya ini karena tidak ada paragraf sebelumnya.

Memperjelas Seleksi Elemen

Jika kamu ingin lebih memperjelas seleksi elemen, kamu bisa menambahkan kelas atau id pada elemen referensi dan target.

Misalkan kamu memiliki struktur HTML berikut:

<div>
    <p id="paragraf1">Paragraf 1</p>
    <p class="paragraf2">Paragraf 2</p>
    <p>Paragraf 3</p>
</div>

Kamu bisa menggunakan selektor adjacent sibling dengan kelas atau id seperti berikut:

#paragraf1+.paragraf2 {
    color: red;
}

Dalam kode di atas, hanya paragraf 2 yang mendapatkan gaya ini karena dia adalah saudara kandung langsung setelah #paragraf1.