CSS-də Uşaq Selektoru

Tutaq ki, bizdə aşağıdakı kod var:

html<p>
  mətn <b><i>qalın italic</i></b>
</p>
<p>
  mətn <i>sadəcə italic</i>
</p>

Tutaq ki, biz abzasların nəvələri olan bütün i teqlərini seçmək istəyirik. Bunu edək:

cssp i {
  color: red;
}

Kodun icrasının nəticəsi:

Gəlin indi bizim abzaların birbaşa nəvələri olan o i teqlərini seçək. Bunda bizə uşaq selektoru > kömək edəcək.

Onun necə istifadə olunacağını başa düşmək üçün gəlin onu nəvə selektorları ilə müqayisə edək. Belə: p i - biz abzaların daxilindəki bütün italicləri seçəcəyik, amma belə: p > i - yalnız abzaların birbaşa nəvələri olan italicləri.

Gəlin bu selektoru bizim HTML kodumuza tətbiq edək:

cssp > i {
  color: red;
}

Kodun icrasının nəticəsi:

html<ul>
  <li>
    <i>italic</i>
    <b>qalın</b>
    <b><i>qalın italic</i></b>
  </li>
  <li>
    <i>italic</i>
    <b>qalın</b>
    <b><i>qalın italic</i></b>
  </li>
</ul>