Pemilihan Pemilihan Saudara KSS
- Hal Sebelumnya Pemilihan Pemilihan Anak Elemen KSS
- Hal Berikutnya Buku Lepas KSS
Pencarian saudara yang berdekatan dapat memilih elemen yang mendahului elemen lain, dan kedua elemen memiliki induk yang sama.
Pilih Saudara yang Berdekatan
Jika perlu memilih elemen yang mendahului elemen lain dan kedua elemen memiliki induk yang sama, dapat digunakan pencarian saudara yang berdekatan (Adjacent sibling selector).
Contoh, jika ingin menambah margin atas paragraf yang mendahului elemen h1, dapat ditulis seperti ini:
h1 + p {margin-top:50px;}
Pencarian ini diucapkan: "Pilih paragraf yang mendahului elemen h1, di mana h1 dan elemen p memiliki induk yang sama."
Penjelasan Gramatika
Pencarian saudara yang berdekatan menggunakan tanda plus (+), yaitu penghubung saudara yang berdekatan (Adjacent sibling combinator).
Keterangan:Seperti penghubung anak, di samping penghubung saudara yang berdekatan dapat ada spasi.
Lihat potongan pohon dokumen di bawah ini:
<div> <ul> <li>Item daftar 1</li> <li>Item daftar 2</li> <li>Item daftar 3</li> </ul> <ol> <li>Item daftar 1</li> <li>Item daftar 2</li> <li>Item daftar 3</li> </ol> </div>
Dalam potongan di atas, elemen div berisi dua daftar: satu daftar tak berurut dan satu daftar berurut, masing-masing berisi tiga item daftar. Kedua daftar ini adalah saudara, dan item daftar itu sendiri juga adalah saudara. Meski demikian, item daftar di daftar pertama dan item daftar di daftar kedua bukan saudara, karena kedua kelompok item daftar ini bukan dari elemen induk yang sama (tidak lebih dari saudara buyut).
Ingatlah, hanya menggunakan operator penghubung untuk memilih elemen kedua di antara dua saudara. Lihat pemilihan di bawah ini:
li + li {font-weight:bold;}
Pemilihan di atas hanya akan menjadikan item kedua dan ketiga dalam daftar tebal. Item pertama tidak dipengaruhi.
Gabungkan dengan pemilihan lain
Operator saudara dapat digabungkan dengan operator lain:
html > body table + ul {margin-top:20px;}
Pemilihan ini dijelaskan sebagai: memilih semua elemen ul yang muncul segera setelah elemen table, dimana elemen table terdapat dalam elemen body, dan elemen body sendiri adalah anak elemen html.
- Hal Sebelumnya Pemilihan Pemilihan Anak Elemen KSS
- Hal Berikutnya Buku Lepas KSS