COMBINE SELECTORS

1. Descendant Selector (space)

div p {
  color: blue;
}

Semua <p> di dalam <div> baik langsung maupun nested

<div>
  <p></p>
  <div>
    <p></p>
  </div>
</div>

div
  └─ p ✅
  └─ div
    └─ p ✅

2. Child Selector (>)

div > p {
  color: green;
}

hanya <p> yang langsung di dalam <div>

<div>
  <p></p>
  <span>
    <p></p>
  </span>
</div>

div
  └─ p ✅
  └─ div
    └─ p ❌

3. Adjacent Sibling Selector (+)

h3 + p {
  color: red;
}

Pilih <p> yang sejajar dan setelah <h3>

<div>
  <p></p>
  <h3></h3>
  <p></p>
  <p></p>
</div>

div
  └─ p ❌
  └─ h3
  └─ p ✅
  └─ p ❌

4. General Sibling Selector (~)

h4 ~ p {
  color: purple;
}

Semua <p> setelah <h4> dalam parent yang sama

<div>
  <h4></h4>
  <p></p>
  <div></div>
  <p></p>
</div>

h4
p ✅
div
p ✅

5. Namespace Selector (|)

• Selector ini sudah jarang dipakai.
• Namespace dipakai kalau dokumen punya lebih dari satu jenis bahasa markup, biasanya:
  • HTML + SVG
  • HTML + XML
  • HTML + MathML