CSS Combinator

CSS Combinator berguna agar selection lebih spesifik. Ada beberapa combinator yang umum digunakan:

Adjacent Sibling (+)

Combinator yang digunakan adalah tanda +, elements harus memiliki parent yang sama. Element kedua terletak langsung setelah element pertama.

Contohnya selector untuk h2 + p, akan match terhadap semua <p> yang terletak setelah <h2> langsung.

h2 + p {
  color : red;
}

<div>
  <h2>CSS tidak diapply</h2>
  <p>CSS di apply</p>
  <h2>CSS tidak diapply</h2>
  <h3>CSS tidak diapply</h2>
  <p>CSS tidak apply</p>
  <h2>CSS tidak diapply</h2>
  <p>CSS di apply</p>
</div>

General Sibling (~)

Combinator yang digunakan adalah tanda ~. Element harus memiliki parent yang sama. Element kedua terletak setelah element pertama.

Contohnya selector untuk h2 ~ p, akan match terhadap semua <p> yang terletak setelah <h2>.

h2 ~ p {
  color : red;
}

<div>
  <h2>CSS tidak diapply</h2>
  <p>CSS di apply</p>
  <h2>CSS tidak diapply</h2>
  <h3>CSS tidak diapply</h2>
  <p>CSS di apply</p>
</div>

Child (>)

Combinator yang digunakan adalah tanda >. Element kedua adalah anak langsung dari element pertama.

Contohnya selector untuk div > p, akan match terhadap semua <p> yang terletak langsung dibawah <div>.

div > p {
  color : red;
}

<div>
  <div>CSS tidak diapply</div>
  <p>CSS di apply</p>
  <article>
    <p>CSS tidak diapply</p>
  </article>
  <p>CSS di apply</p>
</div>

Descendant

Combinator yang digunakan adalah tanda spasi. Element kedua adalah keturunan dari element pertama. Combinator yang sangat umum digunakan.

Contohnya selector untuk div p, akan match terhadap semua <p> yang terletak dibawah <div>.

div p {
  color : red;
}

<div>
  <div>CSS tidak diapply</div>
  <p>CSS di apply</p>
  <article>
    <p>CSS di diapply</p>
  </article>
  <p>CSS di apply</p>
</div>