CSS id und class
Lerne CSS ID- und Class-Selektoren kennen: Wann du welchen verwendest, wie sie sich unterscheiden und wie die Spezifität funktioniert.
Im vorherigen Kapitel haben wir Selektoren kennengelernt. Jetzt sprechen wir über id- und class-Selektoren – die beiden attributbasierten Selektoren, die du beim Gestalten einer Webseite am häufigsten verwenden wirst.
Dieses Kapitel erklärt, was jeder Selektor bewirkt, wie man ihn schreibt, wie sie sich unterscheiden und – genauso wichtig – wann man welchen wählt.
CSS id-Selektor
Ein id-Selektor trifft auf dasjenige einzelne HTML-Element, dessen id-Attribut mit dem angegebenen Namen übereinstimmt. Da eine id innerhalb einer Seite eindeutig sein muss, ist ein id-Selektor für die Gestaltung eines bestimmten Elements gedacht – nicht einer Gruppe davon.
Sowohl in internen als auch in externen Stylesheets schreibst du einen id-Selektor mit einer Raute (#) gefolgt vom id-Wert: #name { ... }.
Beispiel eines ID-Selektors:
CSS ID-Selektor für ein 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>Hier haben wir dem zweiten Absatz die id blue gegeben (id="blue") und seinen Stil mit der color-Eigenschaft definiert – #blue { color: #1c87c9; } – im <head>-Bereich. Nur dieses eine Element wird getroffen, sodass nur der zweite Absatz blau wird; der erste und dritte behalten ihre Standardfarbe.
Ein id-Wert darf keine Leerzeichen enthalten und sollte der Konvention nach nicht mit einer Ziffer beginnen. Öffne das Beispiel im Editor, um zu prüfen, dass nur der zweite Absatz die Farbe #1c87c9 trägt.
CSS class-Selektor
Ein class-Selektor trifft auf jedes Element, dessen class-Attribut den angegebenen Namen enthält. Verwende ihn, wenn derselbe Stil auf mehrere Elemente angewendet werden soll – zum Beispiel ein .warning-Stil für mehrere Hinweise oder ein .btn-Stil, der für viele Schaltflächen wiederverwendet wird.
Sowohl in internen als auch in externen Stylesheets schreibst du einen class-Selektor mit einem Punkt (.) gefolgt vom Klassennamen: .name { ... }.
Beispiel eines class-Selektors:
CSS Class-Selektor Beispiel
<!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>Hier wird dieselbe Klasse blue auf zwei verschiedene Elemente angewendet – eine Überschrift und einen Absatz (class="blue") – und einmal mit .blue { color: #1c87c9; } definiert. Sowohl die Überschrift als auch der dritte Absatz werden #1c87c9, während der mittlere Absatz (ohne Klasse) unverändert bleibt. Eine Regel einmal definieren und wiederverwenden – genau dafür sind Klassen da.
Mehrere Klassen an einem Element
Ein Element kann gleichzeitig mehrere Klassen tragen. Liste sie im class-Attribut durch Leerzeichen getrennt auf, und jede passende Regel wird angewendet:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
font-size: 20px;
}
.highlight {
background-color: #ffe69e;
}
</style>
</head>
<body>
<p class="text highlight">This paragraph is both larger and highlighted.</p>
</body>
</html>Diese Kombinierbarkeit macht Klassen zum Arbeitstier von CSS: Kleine, zweckgebundene Klassen lassen sich auf der ganzen Seite beliebig mischen und kombinieren.
Der Unterschied zwischen id und class
Der wesentliche Unterschied liegt in der Eindeutigkeit:
- Eine id ist eindeutig – jedes Element darf nur eine id haben, und jede Seite sollte nur ein Element mit einer bestimmten id enthalten. Dieselbe id mehreren Elementen zuzuweisen ist ungültiges HTML und kann Skripte und Barrierefreiheitsfunktionen beeinträchtigen, die auf eindeutige ids angewiesen sind.
- Eine class ist wiederverwendbar – dieselbe Klasse darf auf vielen Elementen erscheinen, und ein einzelnes Element darf viele Klassen haben.
| id | class | |
|---|---|---|
| Symbol in CSS | # | . |
| Häufigkeit pro Seite | einmalig | unbegrenzt |
| Pro Element | eine id | viele Klassen |
| Typische Verwendung | ein eindeutiges Element (z. B. ein Seitenkopf, ein Ankerziel) | wiederholte Gestaltung, Komponenten |
Ids haben in der Kaskade auch mehr Gewicht als Klassen. Wenn eine id-Regel und eine class-Regel dasselbe Element treffen, gewinnt die id-Regel unabhängig von der Quellreihenfolge – siehe CSS-Spezifität durch Selektoren. Dieses zusätzliche Gewicht ist ein Grund, warum viele Styleguides Klassen für die Gestaltung bevorzugen und ids für seitenintere Links (href="#section") und JavaScript-Hooks reservieren.
Welchen sollte ich verwenden?
In der Praxis gilt: Verwende Klassen für die Gestaltung. Sie sind wiederverwendbar, leicht zu überschreiben und halten die Spezifität niedrig und vorhersehbar. Greife auf eine id nur zurück, wenn du wirklich einen eindeutigen Bezeichner für ein Element benötigst – für Fragment-Links, label/for-Verknüpfungen in Formularen oder getElementById in JavaScript.