DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Artikel ini menjelaskan konsep dasar Selektor Adjacent Sibling dalam CSS dengan contoh kode yang sederhana dan mudah dimengerti.
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.
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.
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.
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.