Verwendung von id in CSS

Bei der Verwendung von id sind alle Manipulationen mit Selektoren verfügbar, die wir in den vorherigen Lektionen gelernt haben.

Beispiel

Nehmen wir an, wir haben den folgenden Code:

<div id="block">
	<h2>Title</h2>
	<p>text</p>
	<p>text</p>
</div>

Lassen Sie uns das h2 aus dem Element mit der id "block" auswählen und es rot einfärben:

#block h2 {
	color: red;
}

Lassen Sie uns nun das p aus dem Element mit der id "block" auswählen und es grün einfärben:

#block p {
	color: green;
}

Beispiel

Nehmen wir nun an, wir haben den folgenden Code:

<div id="block">
	<h2 class="header">Title</h2>
	<p>text</p>
	<p>text</p>
	
	<h3 class="header">Title</h3>
	<p>text</p>
	<p>text</p>
</div>

Lassen Sie uns die Elemente mit der Klasse header auswählen, die sich innerhalb des Elements mit der id "block" befinden, und sie rot einfärben:

#block .header {
	color: red;
}

Wählen wir nun die Überschriften h2 mit der Klasse header aus, die sich innerhalb des Elements mit der id "block" befinden, und färben sie rot ein:

#block h2.header {
	color: red;
}

Praktische Aufgaben

Schreiben Sie einen Selektor, der alle h2 auswählt, die sich in dem Element mit der id "elem" befinden. Testen Sie Ihren Selektor mit dem folgenden Code:

<div id="elem">
	<h2>Choose</h2>
	<p>---</p>
	
	<h2>Choose</h2>
	<p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

Schreiben Sie einen Selektor, der alle Elemente mit der Klasse text auswählt, die sich in dem Element mit der id "elem" befinden. Testen Sie Ihren Selektor mit dem folgenden Code:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

Schreiben Sie einen Selektor, der alle Absätze mit der Klasse text auswählt, die sich in dem Element mit der id "elem" befinden. Testen Sie Ihren Selektor mit dem folgenden Code:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">---</li>
		<li class="text">---</li>
		<li class="text">---</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

Schreiben Sie einen Selektor, der alle li mit der Klasse text auswählt, die sich in dem Element mit der id "elem" befinden. Testen Sie Ihren Selektor mit dem folgenden Code:

<div id="elem">
	<p class="text">---</p>
	<p class="text">---</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>