Dukterinis selektorius CSS

Tarkime, kad turime tokį kodą:

html<p>
  tekstas <b><i>paryškintas kursyvas</i></b>
</p>
<p>
  tekstas <i>tik kursyvas</i>
</p>

Tarkime, kad norime pasirinkti visas i žymes, kurios yra pastraipų palikuonys. Padarykime tai:

cssp i {
  color: red;
}

Kodo vykdymo rezultatas:

Dabar pabandykime pasirinkti tas i žymes, kurios yra tiesioginiai mūsų pastraipų palikuonys. Tam mums padės dukterinis selektorius >.

Kad suprastume, kaip juo naudotis, palyginkime jį su palikuonių selektoriumi. Štai taip: p i - mes pasirinksime visus kursyvus, esančius pastraipose, o štai taip: p > i - tik kusyvius, kurie yra tiesioginiai pastraipų palikuonys.

Taikykime šį selektorių mūsų HTML kodui:

cssp > i {
  color: red;
}

Kodo vykdymo rezultatas:

html<ul>
  <li>
    <i>kursyvas</i>
    <b>paryškintas</b>
    <b><i>paryškintas kursyvas</i></b>
  </li>
  <li>
    <i>kursyvas</i>
    <b>paryškintas</b>
    <b><i>paryškintas kursyvas</i></b>
  </li>
</ul>