CSS palikuonių selektoriai

Tarkime, kad turime ul sąrašą ir ol sąrašą:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

Nudažykime li žymes šiuose sąrašuose raudona spalva:

li {
	color: red;
}

Tarkime, kad dabar norime nudažyti ul sąrašo li žymes raudona spalva, o ol sąrašo li žymes - žalia spalva.

Šiuo atveju mums padės palikuonių selektorius. Jis leidžia pasirinkti žymes pagal jų tėvą. Norint tai padaryti, reikia nurodyti tėvo selektorių, o per tarpą - palikuonio selektorių. Mūsų atveju selektorius ul li pasirinks visas li žymes iš ul sąrašo, o selektorius ol li - pasirinks visas li žymes iš ol sąrašo. Nudažykime jas reikiamomis spalvomis:

ul li {
	color: red;
}
ol li {
	color: green;
}

Palikuonių selektorius nebūtinai turi būti sudarytas iš dviejų žymių selektorių - jų gali būti bet koks kiekis, parašytas per tarpą. Pavyzdžiui, toliau pateiktame kode pasirenkamos visos i žymes, esančios li žymės viduje, kurios savo ruožtu yra ul žymės viduje:

ul li i {
	color: red;
}

Duotas toks kodas:

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

Nudažykite raudona spalva kursyvą iš ul žymių, o žalia spalva - kursyvą iš p žymių.

Duotas toks kodas:

<p>
	paragraph text <b><i>bold italic</i></b>
</p>
<p>
	paragraph text <i>italic</i>
</p>

Nudažykite raudona spalva kursyvą, esantį b žymės viduje, kuri savo ruožtu yra p žymės viduje.