Järeltulijate valijad CSS-is

Oletame, et meil on loend ul ja loend 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>

Värvime nende loendite li sildid punaseks:

li {
	color: red;
}

Oletame nüüd, et tahame ul loendi li silte värvida punaseks, aga ol loendi li silte roheliseks.

Sellisel juhul aitab meid järeltulijate valija. See võimaldab valida silte nende vanema järgi. Selleks tuleb määrata vanema valija, ja tühikuga eraldatuna - järeltulija valija. Meie juhul valib valija ul li kõik li sildid ul loendist, ja valija ol li - valib kõik li sildid ol loendist. Värvime need vajalikku värvi:

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

Järeltulijate valija ei pea tingimata koosnema kahest sildi valijast - neid võib olla suvaline arv, kirjutatud tühikuga eraldatuna. Järgmises koodis näiteks valitakse kõik i sildid, mis asuvad li sildi sees, mis omakorda asuvad ul sildi sees:

ul li i {
	color: red;
}

Antud on järgmine kood:

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

Värvige punaseks kaldkirjad ul siltidest, ja roheliseks - kaldkirjad p siltidest.

Antud on järgmine kood:

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

Värvige punaseks kaldkiri, mis asub b sildi sees, mis omakorda asub p sildi sees.