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

დავუშვათ, გვაქვს შემდეგი კოდი:

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

დავუშვათ, გვინდა ავირჩიოთ ყველა i თეგი, რომლებიც არის აბზაცების შთამომავლები. გავაკეთოთ ეს:

cssp i {
  color: red;
}

კოდის შესრულების შედეგი:

ახლა კი ავირჩიოთ ის i თეგები, რომლებიც ჩვენი აბზაცების უშუალო შვილებია. ამაში დაგვეხმარება შვილობილი სელექტორი >.

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

გამოვიყენოთ ეს სელექტორი ჩვენს HTML კოდზე:

cssp > i {
  color: red;
}

კოდის შესრულების შედეგი:

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