Kichaguzi cha Mtoto katika CSS

Acha tuwe na msimbo ufuatao:

html<p>
  maandishi <b><i>bold italic</i></b>
</p>
<p>
  maandishi <i>italic tu</i>
</p>

Acha tutake kuchagua vitambulisho vyote i, ambavyo ni vizazi vya aya. Wacha tufanye hivi:

cssp i {
  color: red;
}

Matokeo ya utekelezaji wa msimbo:

Sasa tuchague vitambulisho i, ambavyo ni vizazi vya moja kwa moja vya aya zetu. Hii itasaidiwa na kichaguzi cha mtoto >.

Ili kuelewa jinsi ya kutumia, hebu tulinganishe na kichaguzi cha vizazi. Hivi: p i - tutachagua herufi italic zote ndani ya aya, na hivi: p > i - tu herufi italic, ambazo ni vizazi vya moja kwa moja vya aya.

Wacha tutumie kichaguzi hiki kwenye msimbo wetu wa HTML:

cssp > i {
  color: red;
}

Matokeo ya utekelezaji wa msimbo:

html<ul>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
</ul>