Selektorët e pasardhësve në CSS

Le të themi se kemi një listë ul dhe një listë ol:

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

Le t'i ngjyrosim etiketat li në këto lista në ngjyrë të kuqe:

li {
	color: red;
}

Le të themi se tani duam të ngjyrosim etiketat li të listës ul në të kuqe, kurse etiketat li të listës ol - në të gjelbër.

Në këtë rast, na ndihmon selektori i pasardhësve. Ai lejon zgjedhjen e etiketave sipas prindit të tyre. Për këtë duhet të specifikoni selektorin e prindit, dhe pas një hapësire - selektorin e pasardhësit. Në rastin tonë selektori ul li do të zgjasë të gjitha etiketat li nga lista ul, kurse selektori ol li - do të zgjasë të gjitha etiketat li nga lista ol. Le t'i ngjyrosim ato në ngjyrat e duhura:

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

Selektori i pasardhësve nuk duhet domosdoshmërisht të përbëhet nga dy selektorë etiketash - mund të ketë çfarëdo numri të tyre, të shkruar me hapësirë. Në kodin vijues, për shembull, zgjidhen të gjitha etiketat i, që ndodhen brenda etiketës li, të cilat nga ana e tyre ndodhen brenda etiketës ul:

ul li i {
	color: red;
}

Jepet kodi vijues:

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

Ngjyrosni në të kuqe pjalin nga etiketat ul, kurse në të gjelbër pjalin nga etiketat p.

Jepet kodi vijues:

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

Ngjyrosni në të kuqe pjalin, që ndodhet brenda etiketës b, e cila nga ana e saj ndodhet brenda etiketës p.