Lastenselektori CSS:ssä

Oletetaan, että meillä on seuraava koodi:

<p>
	teksti <b><i>lihavoitu kursivoitu</i></b>
</p>
<p>
	teksti <i>vain kursivoitu</i>
</p>

Oletetaan, että haluamme valita kaikki i -tagit, jotka ovat kappaleiden jälkeläisiä. Tehdään se:

p i {
	color: red;
}

Koodin suorituksen tulos:

Valitaan nyt ne i -tagit, jotka ovat kappaleidemme välittömiä jälkeläisiä. Tässä auttaa lastenselektori >.

Ymmärtääksemme, kuinka sitä käytetään, verrataan sitä jälkeläisvalitsimeen. Näin: p i - valitsemme kaikki kappaleiden sisällä olevat kursivoidut, ja näin: p > i - vain ne kursivoidut, jotka ovat kappaleiden välittömiä jälkeläisiä.

Sovelletaan tätä valitsinta HTML-koodiimme:

p > i {
	color: red;
}

Koodin suorituksen tulos:

Annettu seuraava koodi:

<ul>
	<li>
		<i>kursivoitu</i>
		<b>lihavoitu</b>
		<b><i>lihavoitu kursivoitu</i></b>
	</li>
	<li>
		<i>kursivoitu</i>
		<b>lihavoitu</b>
		<b><i>lihavoitu kursivoitu</i></b>
	</li>
</ul>

Värjää punaiseksi vain ne b -tagit, jotka ovat li -tagien välittömiä jälkeläisiä.