Lädt...

CSS-Pseudoklassen

Tag-, Klassen-, id- und Attributselektoren beherrschen Sie schon. Eine Schicht fehlt noch: Manchmal soll das Aussehen nicht immer gleich sein — sondern wenn der Zeiger über dem Button liegt, wenn jemand per Tab im Feld ist oder wenn ein Link schon geöffnet wurde. Dafür gibt es Pseudoklassen — ohne neue class im HTML.

Was bedeutet Pseudoklasse?

Eine Pseudoklasse ist ein Wort, das mit einem Doppelpunkt (:) an einen Selektor hängt. Im HTML steht nichts wie class="hover". Der Browser aktiviert die Regel, wenn die Bedingung stimmt: Zeiger darüber, Fokus, Link-Verlauf oder Position unter den Geschwistern.

Häufige Pseudoklassen

Lernen Sie zuerst diese. Es gibt mehr Namen, aber für den UI-Einstieg reichen sie meist.

📊 Alltägliche CSS-Pseudoklassen

Pseudoklasse Wann aktiv Beispiel
:hover Zeiger liegt über dem Element a:hover
:focus Element hat Fokus (Tastatur oder Klick) input:focus
:visited Link wurde besucht (mit Datenschutzgrenzen) a:visited
:first-child Element ist erstes Kind des Elternteils li:first-child
:nth-child(n) n-tes Kind oder ungerade/gerade tr:nth-child(odd)
:disabled Formularelement ist deaktiviert button:disabled

Hover — :hover

Mit :hover ändert sich das Aussehen, solange der Zeiger auf dem Element liegt. Buttons und Links wirken lebendig durch eine kleine Änderung — nicht durch einen Layout-Sprung.

Hover — Button-Feedback

css
CSS Code 
button:hover {
background-color: #0f766e;
color: #fff;
}

Hinweis zu Hover

Halten Sie die Änderung sanft. Auf Touch gibt es kaum echtes Hover; legen Sie wichtige Infos nicht nur in :hover.

Fokus — :focus

:focus trifft das gerade aktive Element — etwa nach Tab. Ohne sichtbaren Fokusring verlieren Tastatur-Nutzer die Orientierung im Formular.

Fokus — klarer Ring am Input

css
CSS Code 
input:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}

Hover und Fokus brauchen beide

Hover ist für den Zeiger. Fokus heißt „dieses Steuerelement ist jetzt aktiv“. Entfernen Sie outline nur mit einem ebenso klaren Ersatz.

Besuchte Links — :visited

:visited färbt Links, die der Browser als schon geöffnet kennt. Meist nur Farbe (und wenige weitere Eigenschaften). Verlassen Sie sich nicht auf Padding- oder Layout-Änderungen — Datenschutz begrenzt das.

Besucht — dezente Linkfarbe

css
CSS Code 
a:visited {
color: #6b21a8;
}

Reihenfolge der Link-Zustände

Wenn Sie mehrere Zustände schreiben, ist eine sichere Reihenfolge oft: link → visited → hover → focus (manchmal LVHA). So bleiben Hover und Fokus auch auf besuchten Links sichtbar.

Erstes Kind — :first-child

:first-child heißt: Das Element ist das erste Kind seines Elternteils — nicht „das erste li irgendwo auf der Seite“, sondern das erste unter denselben Geschwistern.

Erstes Kind — ersten Listeneintrag hervorheben

css
CSS Code 
li:first-child {
font-weight: 700;
}

Als Nächstes: :nth-child

Mit :nth-child(odd) oder :nth-child(3) holen Sie Streifen oder „jedes Dritte“. Erst :first-child sitzen, dann diese Muster.

Gute Gewohnheiten

  • Pseudoklasse = ein Doppelpunkt (:hover); Pseudoelement = zwei (::) — nächste Sitzung
  • Interaktives Hover immer mit klarem :focus koppeln
  • Visited-Farben dezent halten
  • Auch mit Tab testen, nicht nur mit der Maus

Selbst ausprobieren

  1. Kurze Seite mit <button>, <input>, ein paar Links und <ul> mit drei <li>.
  2. button:hover { background-color: #0f766e; color: #fff; } — Zeiger über den Button.
  3. input:focus { outline: 2px solid #0f766e; } — per Tab ins Feld.
  4. a:visited { color: #6b21a8; } — Link öffnen und zurück.
  5. li:first-child { font-weight: 700; } — nur der erste Eintrag wird fett.

Typische Fehler

  • ::hover statt :hover — doppelter Doppelpunkt ist für Pseudoelemente
  • Hover stylen und Fokus-Outline ohne Ersatz entfernen
  • Antwortungsfreiheit von :visited für jede Eigenschaft erwarten
  • p:first-child als „erster Absatz irgendwo“ lesen
  • Wichtigen Text nur in :hover legen, sodass Touch-Nutzer ihn nie sehen

Kurzfassung

  • Pseudoklassen wählen nach Zustand oder Position mit einem Doppelpunkt
  • :hover und :focus geben Feedback; behalten Sie beide
  • :visited färbt geöffnete Links im Rahmen der Browsergrenzen
  • :first-child trifft das erste Kind; :nth-child ist der nächste Schritt
  • Ein Doppelpunkt = Pseudoklasse; zwei = Pseudoelement
  • Üben mit Maus, Tab und einer kurzen Liste

🧠 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