CSS Combinators

Css combinators adalah sesuatu yang menjelaskan hubungan antar selector.

div{
  background-color: red;
}

Div dalam sintaks css di atas merupakan selector. Sebuah selector dapat memiliki sebih dari satu selector sederhana. Kita dapat memasukkan combinator pada selector yang sederhana.

Terdapat 4 combinators berbeda dalam css, khususnya css3 :

• descendant selector (selector berdasarkan keturunan)
• child selector (selector berdasarkan anak)
• adjacent sibling selector (selector berdasarkan saudara yang berdekatan)
• general sibling selector (selector berdasarkan saudara secara umum)

Jika kalian pernah belajar css, kalian pasti sudah pernah menggunakan descendant selector. Karena, descendant selector merupakan combinators yang paling sering digunakan (menurut saya).

Descendant Selector

Descendant selector akan memilih semua elemen yang cocok berdasarkan keturunan dari elemen tertentu.
Contoh:

div p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>

    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>

  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Css di atas akan membuat semua <p> atau paragraf yang merupakan keturunan dari div memiliki background berwarna merah, termasuk yang berada di dalam tag <span>. Karena tag <span> juga masih berada di dalam div.

Jadi, paragraf pertama, kedua dan ketiga akan memilik background berwarna merah karena berada di dalam div. Sedangkan paragraf keempat dan kelima tidak, karena berada di luar div.

Child Selector 

Child selector akan memilih semua elemen yang merupakan anak langsung dari elemen teretentu.

div > p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>

    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>

  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, hanya paragraf pertama dan ketiga saja yang memiliki background berwarna merah. Paragraf kedua tidak memiliki background berwarna merah karena paragraf kedua bukan keturunan langsung dari div. Akan tetapi keturunan langsung dari <span> atau bisa dibilang cucu dari div.

Adjacent Sibling Selector

 Adjacent sibling selector akan memilih semua elemen yang  merupakan saudara kandung (atau setingkat) dan berdekatan dengan elemen tertentu.

div + p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>

    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>

  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, hanya paragraf keempat yang memiliki background berwarna merah. Paragraf pertama, kedua dan ketiga berada di dalam div, sehingga tidak satingkat dengan div dan merupakan turunan dari div. Sedangkan paragraf kelima, meskipun saudara (atau setingkat) dengan div namun tidak berdekatan dengan div. hanya paragraf keempat yang merupakan saudara dari div, dan letaknya berdekatan dengan div.

General Sibling Selector

General sibling selector akan memilih semua elemen yang merupakan saudara kandung dari elemen tertentu.

div ~ p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>

    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>

  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, paragraf keempat dan kelima memiliki background berwarna merah. Karena paragraf keempat dan kelima merupakan saudara dari div.

Itulah yang bisa saya sampaikan hari ini. Semoga bermanfaat dan jangan sungkan untuk komentar kalau timbul pertanyaan dalam benak kalian saat membaca postingan ini.