Որդիական սելեկտորը CSS-ում
Ենթադրենք ունենք հետևյալ կոդը՝
<p>
տեքստ <b><i>թավ շեղագիր</i></b>
</p>
<p>
տեքստ <i>պարզ շեղագիր</i>
</p>
Ենթադրենք ուզում ենք ընտրել բոլոր i թեգերը,
որոնք պարագրաֆների ժառանգներ են: Եկեք անենք դա՝
p i {
color: red;
}
Կոդի կատարման արդյունքը՝
Եկեք այժմ ընտրենք այն i թեգերը,
որոնք մեր պարագրաֆների անմիջական ժառանգներն են:
Դրանում մեզ կօգնի որդիական սելեկտորը >:
Հասկանալու համար, թե ինչպես օգտագործել այն, եկեք
համեմատենք այն ժառանգների սելեկտորի հետ: Ահա այսպես՝
p i - մենք կընտրենք պարագրաֆների ներսում գտնվող
բոլոր շեղագիրները, իսկ ահա այսպես՝ p > i - միայն
այն շեղագիրները, որոնք պարագրաֆների անմիջական ժառանգներ են:
Եկեք կիրառենք այս սելեկտորը մեր HTML կոդին՝
p > i {
color: red;
}
Կոդի կատարման արդյունքը՝
Տրված է հետևյալ կոդը՝
<ul>
<li>
<i>շեղագիր</i>
<b>թավ</b>
<b><i>թավ շեղագիր</i></b>
</li>
<li>
<i>շեղագիր</i>
<b>թավ</b>
<b><i>թավ շեղագիր</i></b>
</li>
</ul>
Կարմիր գույնով ներկեք միայն այն b թեգերը,
որոնք li թեգերի անմիջական ժառանգներ են:
