Leszármazott szelektorok a CSS-ben

Tegyük fel, hogy van egy ul listánk és egy ol listánk:

<ul>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
</ul>
<ol>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
</ol>

Színezzük pirosra a li tag-eket ezen listákban:

li {
	color: red;
}

Tegyük fel most, hogy a ul lista li tag-jeit pirosra, a ol lista li tag-jeit pedig zöldre akarjuk színezni.

Ebben az esetben a leszármazott szelektor segít. Ez lehetővé teszi a tag-ek kiválasztását szülőjük alapján. Ehhez meg kell adni a szülő szelektorát, majd szóközzel elválasztva - a leszármazott szelektorát. A mi esetünkben a ul li szelektor kiválasztja az összes li tag-et a ul listából, a ol li szelektor pedig kiválasztja az összes li tag-et a ol listából. Színezzük őket a kívánt színekre:

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

A leszármazott szelektornak nem feltétlenül kell két tag szelektorból állnia - bármennyi lehet belőlük, szóközzel elválasztva. A következő kódban például minden i tag van kiválasztva, amely a li tag-en belül található, amelyek viszont a ul tag-en belül találhatók:

ul li i {
	color: red;
}

Adott a következő kód:

<ul>
	<li>szöveg <i>dőlt</i></li>
	<li>szöveg <i>dőlt</i></li>
	<li>szöveg <i>dőlt</i></li>
	<li>szöveg <i>dőlt</i></li>
</ul>

<p>
	bekezdés szöveg <i>dőlt</i>
</p>
<p>
	bekezdés szöveg <i>dőlt</i>
</p>

Színezd pirosra a dőlt betűket a ul tag-ekből, zöldre pedig a dőlt betűket a p tag-ekből.

Adott a következő kód:

<p>
	bekezdés szöveg <b><i>félkövér dőlt</i></b>
</p>
<p>
	bekezdés szöveg <i>dőlt</i>
</p>

Színezd pirosra a dőlt betűket, amelyek a b tag-en belül találhatók, amely viszont a p tag-en belül található.