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;
}

Ұрпақтар селекторы міндетті түрде екі тег селекторынан тұруы шарт емес - олардың саны кез келген болуы мүмкін, бос орын арқылы жазылады. Мысалы, келесі кодта li тегінің ішінде орналасқан барлық i тегтері таңдалады, ол өз кезегінде 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 тегінің ішінде орналасқан.