CSSda farzand selektori

Quyidagi kodimiz bor deb faraz qilaylik:

html<p>
  matn <b><i>qalin kursiv</i></b>
</p>
<p>
  matn <i>shunchaki kursiv</i>
</p>

Abzaslarning avlodlari bo‘lgan barcha i teglarini tanlamoqchi deb faraz qilaylik. Buni amalga oshiramiz:

cssp i {
  color: red;
}

Kodni bajarish natijasi:

Keling endi, abzalarimizning bevosita farzandlari bo‘lgan i teglarini tanlaylik. Bunda farzand selektori > bizga yordam beradi.

Undan qanday foydalanishni tushunish uchun, keling uni avlod selektori bilan solishtiramiz. Shunday: p i - biz abzalar ichidagi barcha kursivlarni tanlaymiz, ammo shunday: p > i - faqatgina abzalarning bevosita farzandlari bo‘lgan kursivlarni tanlaydi.

Keling bu selektorni bizning HTML kodimizga qo‘llaylik:

cssp > i {
  color: red;
}

Kodni bajarish natijasi:

html<ul>
  <li>
    <i>kursiv</i>
    <b>qalin</b>
    <b><i>qalin kursiv</i></b>
  </li>
  <li>
    <i>kursiv</i>
    <b>qalin</b>
    <b><i>qalin kursiv</i></b>
  </li>
</ul>