CSS-ID und CSS-Klasse
In unserem vorherigen Kapitel haben wir Selektoren kennengelernt. Nun sprechen wir über ID- und Class-Selektoren, die häufig zum Stylen von Webseitenelementen verwendet werden.
CSS-ID-Selektor
Ein ID-Selektor ist eine eindeutige Kennung für ein HTML-Element, auf das ein bestimmter Stil angewendet werden soll. Er wird nur verwendet, wenn ein einzelnes HTML-Element auf der Webseite einen spezifischen Stil erhalten soll.
Sowohl in internen als auch externen Stylesheets verwenden wir für einen ID-Selektor eine Raute (#).
Beispiel für einen ID-Selektor:
CSS-ID-Selektor für HTML-Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Wie Sie sehen, haben wir blue als ID-Selektor für das zweite Absatz-Element (id="blue") zugewiesen und dessen Stil über die Farbeigenschaft definiert — #blue {color: #1c87c9;} im <head>-Bereich. Das bedeutet, dass das HTML-Element mit dem ID-Selektor blue in der Farbe #1c87c9 dargestellt wird.
Testen Sie diesen Code in unserem Online-HTML-Editor, um zu sehen, dass die Farbe des zweiten Absatzes #1c87c9 ist.
CSS-Class-Selektor
Ein Class-Selektor wird verwendet, wenn derselbe Stil auf mehrere HTML-Elemente derselben Webseite angewendet werden soll.
Sowohl in internen als auch externen Stylesheets verwenden wir für einen Class-Selektor einen Punkt (.).
Beispiel für einen Class-Selektor:
Beispiel für einen CSS-Class-Selektor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>In unserem Beispiel wird ein Class-Selektor zweimal verwendet, im Überschriften- und im Absatz-Element.
Wie Sie sehen, haben wir blue als Class-Selektor (class="blue") zugewiesen und dessen Stil über die Farbeigenschaft definiert — .blue {color: #1c87c9;} im <head>-Bereich. Das bedeutet, dass die Elemente mit dem Class-Selektor blue in der Farbe #1c87c9 dargestellt werden.
In unserem Beispiel sind die Überschrift und der dritte Absatz in #1c87c9 gehalten. Testen Sie es in unserem Online-HTML-Editor.
Der Unterschied zwischen ID und Class
Der Unterschied zwischen IDs und Classes besteht darin, dass die erste eindeutig ist, die zweite jedoch nicht. Das bedeutet, dass jedes Element nur eine ID haben kann und jede Seite nur ein Element mit dieser ID enthalten darf. Wird dieselbe ID auf mehrere Elemente angewendet, wird der Code die Validierung nicht bestehen. Da Classes jedoch nicht eindeutig sind, kann dieselbe Class auf mehrere Elemente angewendet werden. Umgekehrt können Sie mehreren Classes auch auf einem einzelnen Element verwenden.
Praxis
Was ist der Hauptunterschied zwischen CSS-ID und CSS-Klasse?