Auswahl eines Elements anhand der eindeutigen ID in CSS

Wie Sie bereits wissen, sind Klassen dazu gedacht, sie einer Gruppe von Elementen zuzuordnen. Neben Klassen kann man Elemente auch anhand ihrer id auswählen, was einen eindeutigen Identifikator des Elements darstellt. Unter Eindeutigkeit wird verstanden, dass, wenn wir bereits ein Element mit dieser id auf der Seite haben, es kein weiteres Element mit derselben id geben sollte.

Der eindeutige Identifikator wird mit Hilfe des Attributes id vergeben, in dem der von uns gewählte Name steht. Lassen Sie uns zum Beispiel zwei Blöcke erstellen. Dem ersten weisen wir id mit dem Wert block1 zu, und dem zweiten - mit dem Wert block2:

<div id="block1">
	<p>text</p>
	<p>text</p>
</div>
<div id="block2">
	<p>text</p>
	<p>text</p>
</div>

Um ein Element mit einer bestimmten id anzusprechen, muss man das Symbol # und den von uns gewählten Namen schreiben, wie folgt:

#block1 {
	color: red;
}
#block2 {
	color: green;
}

Das Attribut id wird in dem Fall verwendet, wenn die Eindeutigkeit des Elements betont werden muss. Klassen werden verwendet, wenn angenommen wird, dass es viele solcher Elemente geben kann, selbst wenn es momentan nur eines gibt.

Gegeben ist der folgende Code:

<div id="elem1">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem2">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem3">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Färben Sie den Inhalt des Blocks elem1 rot ein, des Blocks elem2 - grün, und des Blocks elem3 - blau.