Selektor Anak di CSS

Misalkan kita memiliki kode berikut:

html<p>
  teks <b><i>tebal miring</i></b>
</p>
<p>
  teks <i>hanya miring</i>
</p>

Misalkan kita ingin memilih semua tag i, yang merupakan turunan dari paragraf. Mari kita lakukan ini:

cssp i {
  color: red;
}

Hasil eksekusi kode:

Sekarang mari kita pilih tag i, yang merupakan turunan langsung dari paragraf kita. Dalam hal ini, selektor anak > akan membantu kita.

Untuk memahami cara menggunakannya, mari bandingkan dengan selektor turunan. Seperti ini: p i - kita akan memilih semua teks miring di dalam paragraf, dan seperti ini: p > i - hanya teks miring yang merupakan turunan langsung dari paragraf.

Mari terapkan selektor ini ke kode HTML kita:

cssp > i {
  color: red;
}

Hasil eksekusi kode:

html<ul>
  <li>
    <i>miring</i>
    <b>tebal</b>
    <b><i>tebal miring</i></b>
  </li>
  <li>
    <i>miring</i>
    <b>tebal</b>
    <b><i>tebal miring</i></b>
  </li>
</ul>