შთამომავლების სელექტორი CSS-ში

დავუშვათ, გვაქვს სია ul და სია 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>

მოდით, გავაფერადოთ li თეგები ამ სიებში წითელ ფერში:

li {
	color: red;
}

ახლა დავუშვათ, გვინდა რომ ul სიის li თეგები გავაფერადოთ წითელ ფერში, ხოლო ol სიის li თეგები - მწვანე ფერში.

ამ შემთხვევაში დაგვეხმარება შთამომავლების სელექტორი. ის საშუალებას აძლევს თეგების არჩევანს მათი მშობელის მიხედვით. ამისთვის საჭიროა მიუთითოთ მშობლის სელექტორი, ხოლო მას შემდეგ გამოტოვება - შთამომავლის სელექტორი. ჩვენს შემთხვევაში, ul li სელექტორი აირჩევს ყველა li თეგს ul სიიდან, ხოლო ol li სელექტორი - აირჩევს ყველა li თეგს ol სიიდან. გავაფერადოთ ისინი საჭირო ფერებში:

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

შთამომავლების სელექტორი არ უნდა შედგებოდეს აუცილებლად ორი თეგის სელექტორისგან - მათ შეიძლება იყოს ნებისმიერი რაოდენობა, დაწერილი გამოტოვებით. შემდეგ კოდში, მაგალითად, ირჩევა ყველა i თეგი, რომელიც მდებარეობს li თეგის შიგნით, რომლებიც თავის მხრივ მდებარეობენ ul თეგის შიგნით:

ul li i {
	color: red;
}

მოცემულია შემდეგი კოდი:

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

გააფერადეთ წითელ ფერში კურსივი ul თეგებიდან, ხოლო მწვანე ფერში - კურსივი p თეგებიდან.

მოცემულია შემდეგი კოდი:

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

გააფერადეთ წითელ ფერში კურსივი, რომელიც მდებარეობს b თეგის შიგნით, რომელიც თავის მხრივ მდებარეობს p თეგის შიგნით.