CSS:n jälkeläisvalitsimet

Oletetaan, että meillä on lista ul ja lista ol:

<ul>
	<li>teksti</li>
	<li>teksti</li>
	<li>teksti</li>
	<li>teksti</li>
	<li>teksti</li>
</ul>
<ol>
	<li>teksti</li>
	<li>teksti</li>
	<li>teksti</li>
	<li>teksti</li>
	<li>teksti</li>
</ol>

Väritetään li-tagit näissä listoissa punaiseksi:

li {
	color: red;
}

Oletetaan nyt, että haluamme värittää ul-listan li-tagit punaiseksi ja ol-listan li-tagit vihreäksi.

Tässä tapauksessa jälkeläisvalitsin auttaa meitä. Sen avulla voidaan valita tageja niiden vanhemman perusteella. Tätä varten on määritettävä vanhemman valitsin, ja välilyönnillä erotettuna - jälkeläisen valitsin. Meidän tapauksessamme valitsin ul li valitsee kaikki li-tagit ul-listasta ja valitsin ol li valitsee kaikki li-tagit ol-listasta. Väritetään ne tarvittaviin väreihin:

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

Jälkeläisvalitsimen ei tarvitse koostua vain kahdesta tagivalitsimesta - niitä voi olla mikä tahansa määrä, kirjoitettuna välilyönnillä erotettuna. Seuraavassa koodissa esimerkiksi valitaan kaikki i-tagit, jotka sijaitsevat li-tagin sisällä, jotka puolestaan sijaitsevat ul-tagin sisällä:

ul li i {
	color: red;
}

Annettu seuraava koodi:

<ul>
	<li>teksti <i>kursivoitu</i></li>
	<li>teksti <i>kursivoitu</i></li>
	<li>teksti <i>kursivoitu</i></li>
	<li>teksti <i>kursivoitu</i></li>
</ul>

<p>
	kappaleen teksti <i>kursivoitu</i>
</p>
<p>
	kappaleen teksti <i>kursivoitu</i>
</p>

Väritä punaiseksi kursivoitu ul-tägeistä ja vihreäksi kursivoitu p-tägeistä.

Annettu seuraava koodi:

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

Väritä punaiseksi kursivoitu, joka sijaitsee b-tagin sisällä, joka puolestaan sijaitsee p-tagin sisällä.