Дочерний селектор дар CSS

Бигзор коди зеринро дошта бошем:

html<p>
  матн <b><i>ҳариф ғафс ва каҷ</i></b>
</p>
<p>
  матн <i>танҳо каҷ</i>
</p>

Бигзор мо мехоҳем ҳамаи тегҳои i-ро интихоб кунем, ки фарзанди тегҳои абзас мебошанд. Биёед ин корро кунем:

cssp i {
  color: red;
}

Натиҷаи иҷрои код:

Ҳоло биёед он тегҳои i-ро интихоб кунем, ки фарзанди бевоситаи тегҳои абзаси мо мебошанд. Ин корро дочерний селектори > ба мо кӯмак мекунад.

Барои фаҳмидани истифодаи он, биёед онро бо селектори фарзандон муқоиса кунем. Ин тавр: p i - мо ҳамаи матнҳои каҷшударо дар дохили абзасҳо интихоб мекунем, вале ин тавр: p > i - танҳо матнҳои каҷшудаеро, ки фарзанди бевоситаи абзасҳо мебошанд.

Биёед ин селекторро ба коди HTML-и мо татбиқ кунем:

cssp > i {
  color: red;
}

Натиҷаи иҷрои код:

html<ul>
  <li>
    <i>каҷ</i>
    <b>ҳариф ғафс</b>
    <b><i>ҳариф ғафс ва каҷ</i></b>
  </li>
  <li>
    <i>каҷ</i>
    <b>ҳариф ғафс</b>
    <b><i>ҳариф ғафс ва каҷ</i></b>
  </li>
</ul>