Pemilihan Pemilihan Saudara 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."

Coba Sendiri

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.

Coba Sendiri

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.