Pemilih Anak dalam CSS

Katakan kita mempunyai kod berikut:

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

Katakan kita ingin memilih semua tag i, yang merupakan keturunan perenggan. Mari lakukan ini:

cssp i {
  color: red;
}

Hasil pelaksanaan kod:

Sekarang mari kita pilih tag i, yang merupakan anak langsung perenggan kita. Pemilih anak > akan membantu kita dalam hal ini.

Untuk memahami cara menggunakannya, mari bandingkannya dengan pemilih keturunan. Seperti ini: p i - kita akan memilih semua teks condong di dalam perenggan, tetapi seperti ini: p > i - hanya teks condong yang merupakan anak langsung perenggan.

Mari gunakan pemilih ini pada kod HTML kita:

cssp > i {
  color: red;
}

Hasil pelaksanaan kod:

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