Selektor dapat berisi beberapa penyeleksi sederhana, tetapi di antara setiap pemilih sederhana, harus ada kombinator. Ada beberapa kombinator yang dapat kita gunakan dan masing-masing menggambarkan hubungan antara pemilih.

Sibling combinators (Penggabung saudara)

Ada 2 jenis kombinator saudara kandung, kombinator saudara kandung umum dan kombinator saudara yang berdekatan. Keduanya menangani elemen yang ada pada level yang sama.

Combinator saudara kandung umum (~)

Combinator saudara umum menargetkan elemen yang muncul di mana saja setelah pemilih sederhana dalam induk yang sama, dan menggunakan tilde (~) sebagai pemisah antara elemen.

Katakanlah kami memiliki satu set tombol radio seperti:

<label>
  <input type="radio" name="fruit" value="apple">
  <span>Option 1</span>
  <img src="img/apple.jpg" alt="A red apple">
  <span>Apple</span>
</label>

<label>
  <input type="radio" name="fruit" value="banana">
  <span>Option 2</span>
  <img src="img/banana.jpg" alt="A yellow banana">
  <span>Banana</span>
</label>

<label>
  <input type="radio" name="fruit" value="cherry">
  <span>Option 3</span>
  <img src="img/cherry.jpg" alt="Pair of red cherries">
  <span>Cherry</span>
</label>

Pemilih saudara kandung umum dapat digunakan untuk menata teks dalam label setelah tombol radio ketika sebuah opsi dicentang.

input:checked ~ span {
  color: #860038;
}