Pemilihan Pemilihan Saudara Kepada Kiri

Pemilih saudara mendekati (Adjacent sibling selector) dapat memilih elemen yang muncul segera setelah elemen lain, dan kedua elemen memiliki bapak yang sama.

Pilih Saudara Mendekati

Jika perlu memilih elemen yang muncul segera setelah elemen lain, dan kedua elemen memiliki bapak yang sama, dapat digunakan pemilih saudara mendekati (Adjacent sibling selector).

Contohnya, jika ingin menambah margin atas paragraf yang muncul segera setelah elemen h1, dapat ditulis seperti ini:

h1 + p {margin-top:50px;}

Pemilih ini di baca sebagai: "Pilih paragraf yang muncul segera setelah elemen h1, dimana h1 dan elemen p memiliki bapak yang sama."

Coba sendiri

Penjelasan Grama

Pemilih saudara mendekati menggunakan tanda plus (+), yaitu penghubung saudara mendekati (Adjacent sibling combinator).

Keterangan:Seperti penghubung anak, di samping penghubung saudara mendekati boleh ada ruang kosong.

Lihat potongan pohon dokumen di bawah ini:

<div>
  <ul>
    <li>Item dalam daftar 1</li>
    <li>Item dalam daftar 2</li>
    <li>Item dalam daftar 3</li>
  </ul>
  <ol>
    <li>Item dalam daftar 1</li>
    <li>Item dalam daftar 2</li>
    <li>Item dalam daftar 3</li>
  </ol>
</div>

Dalam bagian di atas, elemen div mengandung dua daftar: satu daftar tak berurutan dan satu daftar berurutan, masing-masing daftar mengandung tiga item daftar. Kedua daftar ini adalah saudara dekat, item daftar sendiri juga adalah saudara dekat. Namun, item daftar pertama dalam daftar pertama dan item daftar kedua dalam daftar kedua bukan saudara dekat, karena keduanya bukan milik elemen induk yang sama (mungkin hanya saudara sepupu).

Ingatlah, hanya satu kombinasi dapat memilih elemen kedua di antara dua saudara dekat. Lihat pemilihan di bawah ini:

li + li {font-weight:bold;}

Pemilihan di atas hanya akan membuat item kedua dan ketiga dalam daftar tebal. Item pertama tidak terpengaruh.

Coba sendiri

Kombinasi dengan pemilihan lain

Simbol saudara dekat dapat digabungkan dengan kombinasi lain:

html > body table + ul {margin-top:20px;}

Pemilihan ini dijelaskan seperti berikut: Memilih semua elemen ul yang muncul segera setelah elemen table, di mana elemen table berada dalam elemen body, dan elemen body sendiri adalah anak elemen html.