Pēcteču selektori CSS

Pieņemsim, ka mums ir saraksts ul un saraksts ol:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

Krāsosim li elementus šajos sarakstos sarkanā krāsā:

li {
	color: red;
}

Pieņemsim, ka tagad mēs vēlamies ul saraksta li elementus krāsot sarkanā krāsā, bet ol saraksta li elementus - zaļā krāsā.

Šajā gadījumā mums palīdzēs pēcteču selektors. Tas ļauj atlasīt elementus pēc to vecāka. Lai to izdarītu, jānorāda vecāka selektors, un pēc atstarpes - pēcteča selektors. Mūsu gadījumā selektors ul li atlasīs visus li elementus no ul saraksta, bet selektors ol li - atlasīs visus li elementus no ol saraksta. Nokrāsosim tos vajadzīgajās krāsās:

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

Pēcteču selektoram noteikti nav jāsastāv tikai no divu elementu selektoriem - to var būt jebkurš skaits, rakstīti atdalot ar atstarpēm. Piemēram, sekojošajā kodā tiek atlasīti visi i elementi, kas atrodas li elementa iekšienē, kas savukārt atrodas ul elementa iekšienē:

ul li i {
	color: red;
}

Dots sekojošs kods:

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

Izkrāsojiet sarkanā krāsā slīprakstu no ul elementiem, un zaļā krāsā - slīprakstu no p elementiem.

Dots sekojošs kods:

<p>
	paragraph text <b><i>bold italic</i></b>
</p>
<p>
	paragraph text <i>italic</i>
</p>

Izkrāsojiet sarkanā krāsā slīprakstu, kas atrodas b elementa iekšienē, kas savukārt atrodas p elementa iekšienē.