Որդիական սելեկտորը 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>