Nachfahrenselektor in CSS

Nehmen wir an, wir haben eine ungeordnete Liste ul und eine geordnete Liste 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>

Lassen Sie uns die li-Tags in diesen Listen rot einfärben:

li {
	color: red;
}

Nehmen wir nun an, wir möchten die li-Tags der ul-Liste rot einfärben und die li-Tags der ol-Liste - grün.

In diesem Fall hilft uns der Nachfahrenselektor. Er erlaubt es, Tags basierend auf ihrem Elternelement auszuwählen. Dazu muss der Selektor des Elternelements angegeben werden, und, durch ein Leerzeichen getrennt, der Selektor des Nachfahren. In unserem Fall wählt der Selektor ul li alle li-Tags aus der ul-Liste aus, und der Selektor ol li - wählt alle li-Tags aus der ol-Liste aus. Färben wir sie in den gewünschten Farben ein:

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

Der Nachfahrenselektor muss nicht unbedingt aus zwei Tag-Selektoren bestehen - es kann eine beliebige Anzahl davon geben, durch Leerzeichen getrennt. Im folgenden Code werden beispielsweise alle i-Tags ausgewählt, die sich innerhalb eines li-Tags befinden, die sich wiederum innerhalb eines ul-Tags befinden:

ul li i {
	color: red;
}

Gegeben ist der folgende Code:

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

Färben Sie die kursiven Texte aus den ul-Tags rot ein und die kursiven Texte aus den p-Tags grün.

Gegeben ist der folgende Code:

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

Färben Sie den kursiven Text, der sich innerhalb eines b-Tags befindet, welches sich wiederum innerhalb eines p-Tags befindet, rot ein.