CSS INTENSIVSTATION

Pseudoklassen

Pseudoklassen beschreiben einen Zustand oder eine Position eines Elements. Sie wählen kein neues Element aus, sondern reagieren auf Situationen wie Hover, Fokus oder die Struktur im Dokument.

Sie werden eingesetzt, wenn Styles nur unter bestimmten Bedingungen gelten sollen – etwa bei Benutzerinteraktionen oder abhängig von der Position eines Elements innerhalb eines Containers.

Syntax

Eine Pseudoklasse wird mit einem Doppelpunkt an einen Selektor angehängt: selektor:zustand 

a:hover {
    text-decoration: underline;
}

:hover ist kein eigenes Element, sondern beschreibt den aktuellen Zustand des Links.

Interaktion

Diese Pseudoklassen reagieren auf Benutzeraktionen. Sie werden häufig für Navigationen, Buttons, Formulare und interaktive UI-Elemente eingesetzt.

  • :hoverGilt, wenn sich der Mauszeiger über dem Element befindet.
  • :focusGilt, wenn ein Element den Tastaturfokus besitzt (z. B. durch Navigation mit der Tab-Taste). Dieser Zustand ist zentral für Accessibility.
  • :activeGilt während des Klicks auf ein Element (Mouse-Down-Zustand).

Pseudoklassen werden sehr häufig mit Klassen kombiniert. So lassen sich gezielt bestimmte Elemente in einem bestimmten Zustand ansprechen.

Ich bin ein <p> Element, mit der Klasse .btn mein Hintergrund ändert die Farbe beim :hover

Blindtext als Titel

.btn:hover {
    background-color: red;
    color: white;
}

In diesem Beispiel reagiert nur ein Element mit der Klasse btn auf den Hover-Zustand – andere Elemente bleiben unverändert.

Pseudoklassen wie :hover, :focus oder :active sind nicht auf Links beschränkt, sondern können auch bei vielen anderen Elementen wie p, div oder button eingesetzt werden.

Links

Einige Pseudoklassen sind speziell für Links definiert. Andere wie :hover, :focus oder :active funktionieren auch bei vielen anderen Elementen.

  • :linknoch nicht besuchter Link
  • :visitedbereits besuchter Link
  • :hoverMaus befindet sich über dem Link
  • :focusLink hat Tastaturfokus
  • :activeLink wird gerade geklickt

Beispiele

Die Pseudoklassen :link und :visited gelten ausschliesslich für echte Links (<a href="...">).

Blindtext mit Link ins nirgendwo

.demolink a, .demolink a:visited{
    color: white;
    background: firebrick;
    }
.demolink a:hover{
    color: white;
    background: indigo;
    }
.demolink a:active{
    color: white;
    background: yellowgreen;
    }

Link-Zustände werden häufig gemeinsam gestylt. Dafür können mehrere Pseudoklassen mit Kommas zu einem Gruppenselektor kombiniert werden.

a:hover,
a:focus,
a:active {
    text-decoration: underline;
}

a vs. a:link

a ist der Elementselektor für alle Links – unabhängig vom aktuellen Zustand.

Styles auf a wirken grundsätzlich auf alle Link-Zustände (:link, :visited, :hover, :focus, :active), sofern sie nicht überschrieben werden.

a:link ist eine Pseudoklasse und gilt nur für noch nicht besuchte Links. Styles auf a:link wirken ausschliesslich in diesem einen Zustand.

Struktur

  • :first-childerstes Kindelement im Container
  • :last-childletztes Kindelement im Container
  • :nth-child()n-tes Kindelement (Position zählt alle Kinder)
  • :first-of-typeerstes Element dieses Typs im Container
  • :nth-of-type()n-tes Element dieses Typs im Container
  • :not()Negation: alle ausser …

Struktur-Pseudoklassen beziehen sich auf die Position eines Elements innerhalb seines Eltern-Elements. Sie sind nützlich für Listen, Navigationen oder wiederkehrende Layout-Strukturen.

:first-child und :last-child

Diese Pseudoklassen beziehen sich auf die Position eines Elements innerhalb seines Eltern-Elements und nicht auf Interaktion.

Typischer Einsatz sind Listen oder wiederkehrende Strukturen, bei denen das erste oder letzte Element gezielt gestaltet werden soll.

  • Nummer eins
  • Nummer zwei
  • Nummer drei
  • Nummer vier
li:first-child{
    font-weight: bold;
    color: red;
}
li:last-child{
    font-weight: bold;
    color: green;
}

Wählt das erste bzw. letzte Kindelement innerhalb eines Containers.
Wichtig: :first-child bedeutet „erstes Kind im Container“ – nicht „erstes Element dieses Typs“.

:nth-child()

:nth-child() wählt Elemente nach ihrer Position im Container. Damit kannst du z. B. Listen im Zebra-Style gestalten.

  • Eintrag 1
  • Eintrag 2
  • Eintrag 3
  • Eintrag 4
  • Eintrag 5
.zebra li:nth-child(odd){background:#f3f3f3;}
.zebra li:nth-child(even){background:#e6e6e6;}

odd bedeutet ungerade (1, 3, 5, …), even bedeutet gerade (2, 4, 6, …).

:nth-child(4)

Mit :nth-child(4) wird exakt das vierte Kindelement im Container ausgewählt. 4 ist zwar eine gerade Zahl, aber hier geht es um die Position.
Wichtig: :nth-child() kann nicht nur odd/even, sondern auch Zahlen und Formeln.

  • Eintrag 1
  • Eintrag 2
  • Eintrag 3
  • Eintrag 4
  • Eintrag 5
li:nth-child(4){
 background: salmon;
}

Formeln haben die Form An+B. n zählt hoch (0,1,2,...). Beispiel: 3n+1 trifft 1,4,7,10,...

Wichtig: n beginnt bei 0. Die Rechnung startet also mit 3·0+1 = 1. Gezählt werden aber nur echte Kindelemente (ab 1), da es kein „0. Kind“ gibt.

li:nth-child(4){...}      /* nur das 4. Element */
li:nth-child(odd){...}    /* 1,3,5,... */
li:nth-child(2n+1){...}   /* ungerade (Formel) */
li:nth-child(3n+1){...} /* 1,4,7,10,... */
li:nth-child(3n){...}     /* jedes 3. Element: 3,6,9,... */

Merksatz: Bei :nth-child() wird ab 0 gerechnet, aber ab 1 gezählt.

:first-of-type

:first-of-type wählt das erste Element dieses Typs innerhalb des Containers – unabhängig davon, ob es das erste Kind ist.

Ich bin der erste span.
Ich bin der zweite span.
Ich bin der dritte span. 

.type-demo span:first-of-type{font-weight:bold;color:magenta;}

:nth-of-type()

:nth-of-type() zählt nur Elemente des gleichen Typs (z. B. nur p). Das ist der Unterschied zu :nth-child(), das alle Kinder zählt.

Im folgenden Beispiel werden nur p-Elemente gezählt.

Span 1

Absatz 1

Span 2

Absatz 2 (2. vom Typ p)

Absatz 3

.type-demo2 p:nth-of-type(2){
    background: salmon;
}

Merksatz: child zählt Kinder, of-type zählt Typen.

:not()

:not() ist die Negation: Es wählt alles, was nicht auf den Selektor in den Klammern passt.
Praktisch für Ausnahmen: „alle, ausser …“
Seit neueren CSS-Versionen können in :not() auch mehrere Selektoren kombiniert werden.

Beispiel: span ohne class - span mit class="intro" - span ohne class

span:not(.intro){
    border: 1px solid magenta;
}

Merksatz: :not() ist „alle, ausser …“.

Das Beispiel wählt alle p-Elemente, ausser jene mit .intro oder .highlight.

p:not(.intro, .highlight){
    color: gray;
}

Merksatz: :not() kann mehrere Ausschlüsse enthalten – wie eine Negativliste.

Kombinieren

Selektoren lassen sich kombinieren. Man liest sie am besten von rechts nach links: was wird gestylt? und dann unter welchen Bedingungen?

Ich bin ein h4 Titel

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines grossen Bruders »Lorem Ipsum«.

div:not(.home) h4 + p::first-line{
    color: red;
}

Leserichtung: ::first-line (Fragment) von einem p, das direkt nach einem h4 kommt, aber nur in div-Containern, die nicht .home sind.

Hinweis: ::first-line ist ein Pseudoelement. Das Beispiel zeigt also bewusst: Kombinieren geht über Kategorien hinweg (Selektoren + Pseudoklassen + Pseudoelemente).

Kurz gesagt

  • :pseudoklasse beschreibt einen Zustand oder eine Position
  • Pseudoklassen wählen kein neues Element aus
  • Klasse + Pseudoklasse = gezielte Zustände
  • Links haben eigene Zustände (:link, :visited)
  • a = Grundstil, a:link = zustandsbezogen

Siehe auch Pseudoelemente