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.