Dukterinis selektorius CSS

Tarkime, kad turime tokį kodą:

<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:

p 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:

p > i {
	color: red;
}

Kodo vykdymo rezultatas:

Duotas toks kodas:

<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>

Nudažykite raudona spalva tik tas b žymes, kurios yra tiesioginiai li žymių palikuonys.