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

დავუშვათ, გვაქვს სია ul და სია ol:

html<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 თეგები ამ სიებში წითელ ფერში:

cssli {
  color: red;
}

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

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

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

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

cssul li i {
  color: red;
}

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

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