Klassen und IDs

HTML-Elemente können mit Klassen (class) und IDs (id) versehen werden. Diese dienen dazu, Elemente gezielt mit CSS zu gestalten oder mit JavaScript anzusprechen.

Klassen (class)

• können mehrfach auf einer Seite verwendet werden
• ein Element kann mehrere Klassen besitzen

Beispiel:

<p class="wichtig">Achtung!</p>
<p class="wichtig">Noch ein Hinweis.</p>

CSS dazu:

.wichtig {
  color: red;
  font-weight: bold;
}

Das Punktzeichen (.) steht in CSS für eine Klasse.

IDs (id)

• dürfen pro Seite nur einmal vorkommen
• identifizieren ein Element eindeutig

Beispiel:

<p id="info">Wichtige Information</p>

CSS dazu:

#info {
  color: blue;
}

Das Rautezeichen (#) steht in CSS für eine ID.

Unterschied zwischen class und id

Merkmal	class	id
Mehrfach verwendbar	Ja	Nein
Eindeutig pro Seite	Nein	Ja
CSS-Schreibweise	.name	#name

Kurzmerksatz

Klassen gruppieren mehrere Elemente, IDs kennzeichnen ein einzelnes Element eindeutig.

Spezifität (Priorität von CSS-Regeln)

Wenn mehrere CSS-Regeln auf dasselbe Element zutreffen, entscheidet die sogenannte Spezifität, welche Regel angewendet wird.

Grundsätzlich gilt:

• ID-Selektoren haben eine höhere Priorität als Klassen
• Klassen haben eine höhere Priorität als Element-Selektoren
• Spätere Regeln können frühere überschreiben

Beispiel:

<p id="info" class="wichtig">Text</p>

p { color: black; }
.wichtig { color: red; }
#info { color: blue; }

Ergebnis: Der Text wird blau dargestellt, da die ID die höchste Spezifität besitzt.

Reihenfolge der Spezifität

Selektor	Beispiel	Priorität
Element	p	niedrig
Klasse	.wichtig	mittel
ID	#info	hoch

Merksatz

Je spezifischer ein Selektor ist, desto höher ist seine Priorität.