CSS හි දරු තේරීම්කරු

අපට පහත කේතය ඇතැයි සිතමු:

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

යම් ඡේදවලට පසුපස්සියන් වන සියලුම i ටැග් තෝරා ගැනීමට අපට අවශ්‍ය යැයි සිතමු. අපි එය කරමු:

p i {
	color: red;
}

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

දැන් අපි ඡේදවලට කෙලින්ම පසුපස්සි වන i ටැග් තෝරා ගනිමු. මේ සඳහා දරු තේරීම්කරු > අපට උපකාරී වේ.

එය භාවිතා කරන්නේ කෙසේදැයි තේරුම් ගැනීම සඳහා, අපි එය පසුපස්සි තේරීම්කරු සමඟ සංසන්දනය කරමු. මෙය මෙසේය: p i - අපි ඡේද තුළ ඇති සියලුම ඇලකුරු තෝරා ගනිමු, නමුත් මෙය මෙසේය: p > i - ඡේදවලට කෙලින්ම පසුපස්සි වන ඇලකුරු පමණි.

අපි මෙම තේරීම්කරු අපගේ HTML කේතයට යොදමු:

p > i {
	color: red;
}

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

පහත කේතය ලබා දී ඇත:

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

li ටැග් වලට කෙලින්ම පසුපස්සි වන b ටැග් පමණ රතු පැහැයට වර්ණාලේප කරන්න.