CSSтегин бала селектору

Бизде төмөнкү код болсун:

html<p>
  текст <b><i>калын курсив</i></b>
</p>
<p>
  текст <i>жөнөкөй курсив</i>
</p>

Абзацтардын тукумдары болгон бардык i тегдерин тандайлы. Муну жасайлы:

cssp i {
  color: red;
}

Кодду иштетүүнүн натыйжасы:

Эми биз абзацтардын түздөн-түз бала тукумдары болгон i тегдерин тандайлы. Бул жерде бизге бала селектору > жардам берет.

Аны кантип колдонорубузду түшүнүү үчүн, аны тукум селектору менен салыштыралы. Мына ушул: p i - биз абзацтардын ичиндеги бардык курсивтерди тандайбыз, ал эми мына ушул: p > i - абзацтардын түздөн-түз бала тукумдары болгон курсивтерди гана тандайт.

Бул селекторду биздин HTML кодубузга колдонолу:

cssp > i {
  color: red;
}

Кодду иштетүүнүн натыйжасы:

html<ul>
  <li>
    <i>курсив</i>
    <b>калын</b>
    <b><i>калын курсив</i></b>
  </li>
  <li>
    <i>курсив</i>
    <b>калын</b>
    <b><i>калын курсив</i></b>
  </li>
</ul>