Moettke am 18. Februar 2026 um 09:59 Uhr

2026-02-18T09:59:19Z

← Nächstältere Version		Version vom 18. Februar 2026, 09:59 Uhr
Zeile 1:		Zeile 1:
	HTML-Elemente können mit '''Klassen''' (<code>class</code>) und '''IDs''' (<code>id</code>) versehen werden.		HTML-Elemente können mit '''Klassen''' (<code>class</code>) und '''IDs''' (<code>id</code>) versehen werden.
	Diese dienen dazu, Elemente gezielt mit CSS zu gestalten oder mit JavaScript anzusprechen.		Diese dienen dazu, Elemente gezielt mit [[Grundlagen CSS\|CSS]] zu gestalten oder mit JavaScript anzusprechen.

	== Klassen (class) ==		== Klassen (class) ==

Moettke: Die Seite wurde neu angelegt: „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:
Achtung!

Noch ein Hinweis.
…“

2026-02-18T09:47:42Z

Die Seite wurde neu angelegt: „HTML-Elemente können mit '''Klassen''' (<code>class</code>) und '''IDs''' (<code>id</code>) 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: <syntaxhighlight lang="html"> Achtung! Noch ein Hinweis. </syntaxhighlight>…“

Neue Seite

HTML-Elemente können mit '''Klassen''' (<code>class</code>) und '''IDs''' (<code>id</code>) 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:

<syntaxhighlight lang="html">
Achtung!
Noch ein Hinweis.
</syntaxhighlight>

CSS dazu:

<syntaxhighlight lang="css">
.wichtig {
color: red;
font-weight: bold;
}
</syntaxhighlight>

Das Punktzeichen (<code>.</code>) steht in CSS für eine Klasse.

== IDs (id) ==
* dürfen pro Seite nur '''einmal''' vorkommen
* identifizieren ein Element eindeutig

Beispiel:

<syntaxhighlight lang="html">
Wichtige Information
</syntaxhighlight>

CSS dazu:

<syntaxhighlight lang="css">
#info {
color: blue;
}
</syntaxhighlight>

Das Rautezeichen (<code>#</code>) steht in CSS für eine ID.

== Unterschied zwischen class und id ==

{| class="wikitable" style="width:100%; text-align:center;"
! 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:

<syntaxhighlight lang="html">
Text
</syntaxhighlight>

<syntaxhighlight lang="css">
p { color: black; }
.wichtig { color: red; }
#info { color: blue; }
</syntaxhighlight>

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

== Reihenfolge der Spezifität ==

{| class="wikitable" style="width:100%; text-align:center;"
! 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.'''

Klassen und IDs - Versionsgeschichte

Moettke am 18. Februar 2026 um 09:59 Uhr