Lädt...

CSS-Spezifität

Selektoren schreiben können Sie schon. In echten Stylesheets kollidieren Regeln: Zwei Regeln treffen dasselbe Element und dieselbe Eigenschaft. Der Browser rät nicht — er nutzt Spezifität und bei Gleichstand die Reihenfolge im CSS.

Was bedeutet Spezifität?

Spezifität ist ein Gewicht, das der Browser einem Selektor gibt. Bei Konflikten gewinnt der schwerere Selektor für diese Eigenschaft. Für den Alltag merken Sie sich die Leiter: Inline-Style > id > class (und Attribut / Pseudoklasse) > element (und Pseudoelement). * und Kombinatoren selbst erhöhen die Spezifität nicht.

Rang auf einen Blick

Lernen Sie zuerst diese Reihenfolge. Es gibt mehr Details, aber die meisten Anfänger-Konflikte löst diese Leiter.

📊 CSS-Spezifitätsrang (Alltag)

Art Beispiele Schlägt meist
Inline-Style style="color: red" Fast alles in der Stylesheet
Id #hero, #nav Classes und Elemente
Class / Attribut / Pseudoklasse .card, [type="email"], :hover Elementselektoren
Element / Pseudoelement p, h1, ::before Nur schwächere oder gleiche Regeln (dann Quellreihenfolge)

Class schlägt Element

Ein Typselektor ist breit. Eine Klasse ist spezieller — die Klassenfarbe gewinnt. Reihenfolge zählt nur bei gleichem Gewicht.

Class gewinnt gegen Element

css
CSS Code 
p {
color: #334155;
}

.note {
color: #0f766e;
}

Den Konflikt lesen

Bei <p class="note"> passen beide Regeln. .note ist eine Klasse; p ein Element. Klasse gewinnt → teal-Text.

Id schlägt Class

Eine Id ist spezieller als eine Klasse. Für wiederverwendbares Design Klassen bevorzugen; Ids sparsam für einzigartige Haken.

Id gewinnt gegen Class

css
CSS Code 
.note {
color: #0f766e;
}

#title {
color: #9f1239;
}

Warum das zählt

Wird <h1 id="title" class="note"> weinrot, hat die Id gewonnen — nicht aus „gefühlter Wichtigkeit“, sondern wegen höherem Gewicht.

Gleiches Gewicht → spätere Regel gewinnt

Haben zwei Regeln dieselbe Spezifität, gewinnt die spätere im CSS für diese Eigenschaft.

Gleiches Gewicht — Quellreihenfolge entscheidet

css
CSS Code 
.card {
border-color: #cbd5e1;
}

.card {
border-color: #0f766e;
}

Gewohnheit bei Gleichstand

Beide Selektoren sind eine Klasse. Die zweite .card-Regel gewinnt → teal-Rand. Wollten Sie die erste Farbe, prüfen Sie, ob ein speziellerer Selektor auch trifft.

Kombinierte Selektoren in der Praxis

Selektoren lassen sich kombinieren: nav a.button:hover ist stärker als bloßes a, weil Klasse und Pseudoklasse dazukommen. Sie brauchen keinen Taschenrechner pro Zeile — fragen Sie: „Id? Extra-Klasse? Oder nur Tags?“

Kombinierter Selektor schlägt nacktes Element

css
CSS Code 
a {
color: #334155;
}

nav a.button {
color: #0f766e;
}

Zu !important

!important kann normale Spezifität überstimmen. Feuerlöscher, kein Alltagswerkzeug. Zu viel davon macht spätere Änderungen schwer. Zuerst Struktur und klarere Selektoren.

Praktische Gewohnheiten

  • Fürs Aussehen class; id für einzigartige Haken
  • Hängen geblieben? Welche Leitersprosse hat jeder Selektor?
  • Gleiches Gewicht → spätere Regel in der Datei prüfen
  • Keine langen Ketten nur zum „Gewinnen“ — sie brechen bei HTML-Änderungen
  • !important zuletzt, nicht zuerst

Selbst ausprobieren

  1. Seite mit <p class="note">Hallo</p>, <h1 id="title" class="note">Titel</h1> und <a class="button">Los</a> in <nav>.
  2. Element-vs-Klasse (p grau, .note teal) — Notizabsatz wird teal.
  3. #title { color: #9f1239; } — Überschrift wird weinrot trotz .note.
  4. Zwei .card-Regeln für border-color — die spätere gewinnt.
  5. Optional: a { … } mit nav a.button { … } am Nav-Link vergleichen.

Typische Fehler

  • Glauben, „mehr Deklarationen“ erhöhen Spezifität — tun sie nicht
  • Annehmen, die letzte Datei schlägt immer eine Id — höheres Gewicht gewinnt weiter
  • #alles oder !important als Standardfix
  • Leitersprossen verwechseln (Klasse wie Element behandeln)
  • Vergessen, dass Gleichstand auf Quellreihenfolge zurückfällt

Kurzfassung

  • Spezifität entscheidet Konflikte bei derselben Eigenschaft
  • Alltagleiter: inline > id > class/Attribut/Pseudoklasse > element/Pseudoelement
  • Gleiches Gewicht → spätere Regel
  • Fürs Aussehen Klassen; id und !important selten
  • Zuerst Leitersprosse, dann Reihenfolge
  • Mit p / .note / #title üben, bis der Sieger klar ist

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial