შვილობილი სელექტორი 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>

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