Սելեկտորների ընտրությունը CSS-ում

Ենթադրենք՝ ունենք ul ցուցակ և ol ցուցակ.

<ul>
	<li>տեքստ</li>
	<li>տեքստ</li>
	<li>տեքստ</li>
	<li>տեքստ</li>
	<li>տեքստ</li>
</ul>
<ol>
	<li>տեքստ</li>
	<li>տեքստ</li>
	<li>տեքստ</li>
	<li>տեքստ</li>
	<li>տեքստ</li>
</ol>

Եկեք ներկենք այս ցուցակների li թեգերը կարմիր գույնով.

li {
	color: red;
}

Ենթադրենք՝ հիմա ուզում ենք ներկել ul ցուցակի li թեգերը կարմիր, իսկ ol ցուցակի li թեգերը՝ կանաչ։

Այս դեպքում մեզ կօգնի ժառանգների սելեկտորը։ Այն թույլ է տալիս ընտրել թեգերը ըստ նրանց ծնողի։ Դրա համար անհրաժեշտ է նշել ծնողի սելեկտորը, ապա բացատով՝ ժառանգի սելեկտորը։ Մեր դեպքում ul li սելեկտորը կընտրի բոլոր li թեգերը ul ցուցակից, իսկ ol li սելեկտորը՝ կընտրի բոլոր li թեգերը ol ցուցակից։ Ներկենք դրանք անհրաժեշտ գույներով.

ul li {
	color: red;
}
ol li {
	color: green;
}

ժառանգների սելեկտորը պարտադիր չէ, որ բաղկացած լինի երկու թեգերի սելեկտորներից - դրանք կարող են լինել ցանկացած քանակությամբ, գրված բացատով։ Օրինակ՝ հաջորդ կոդում ընտրվում են բոլոր i թեգերը, որոնք գտնվում են li թեգի ներսում, որոնք իրենց հերթին գտնվում են ul թեգի ներսում.

ul li i {
	color: red;
}

Տրված է հետևյալ կոդը.

<ul>
	<li>տեքստ <i>թեք</i></li>
	<li>տեքստ <i>թեք</i></li>
	<li>տեքստ <i>թեք</i></li>
	<li>տեքստ <i>թեք</i></li>
</ul>

<p>
	պարբերության տեքստ <i>թեք</i>
</p>
<p>
	պարբերության տեքստ <i>թեք</i>
</p>

Ներկեք կարմիր գույնով թեք տառատեսակը ul թեգերից, իսկ կանաչ գույնով՝ թեք տառատեսակը p թեգերից։

Տրված է հետևյալ կոդը.

<p>
	պարբերության տեքստ <b><i>հաստ թեք</i></b>
</p>
<p>
	պարբերության տեքստ <i>թեք</i>
</p>

Ներկեք կարմիր գույնով թեք տառատեսակը, որ գտնվում է b թեգի ներսում, որն իր հերթին գտնվում է p թեգի ներսում։