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 селектору ul тизмесинен бардык li тегдерин тандайт, ал эми ol li селектору ol тизмесинен бардык li тегдерин тандайт. Аларды каалаган түстөргө бояйлы:

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

Тукум селектору милдети тегдердин эки селекторунан турушу шарт эмес - алардын саны боштук менен бөлүнгөн каалагандай болушу мүмкүн. Кийинки коддо, мисалы, ul тегинин ичинде жайгашкан, өз кезегинде li тегинин ичинде жайгашкан бардык i тегдери тандалат:

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>

p тегинин ичинде жайгашкан, өз кезегинде b тегинин ичинде жайгашкан курсивти кызыл түскө боёңуз.