Pseudo-Klassen und Pseudo-Selektoren: Oft vergessene CSS-Selektoren und -Eigenschaften

Eine Pseudoklasse wird verwendet, um einen speziellen Zustand eines Elements zu definieren. Pseudoklassenselektoren sind CSS-Selektoren, denen ein Doppelpunkt vorangestellt ist. Du bist wahrscheinlich mit einigen von ihnen sehr vertraut.

Sie können zum Beispiel verwendet werden, um:

• ein Element zu gestalten, wenn ein Benutzer mit der Maus darüber fährt
• besuchte und nicht besuchte Links unterschiedlich zu gestalten
• Stilisierung eines Elements, wenn es den Fokus erhält

Syntax

selector:pseudo-class {
  property: value;
}

Anker-Pseudo-Klassen

Links können auf unterschiedliche Weise dargestellt werden:

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

Hinweis: a:hover MUSS in der CSS-Definition nach a:link und a:visited stehen, um wirksam zu sein! a:active MUSS in der CSS-Definition nach a:hover stehen, um wirksam zu sein! Bei Pseudoklassennamen wird nicht zwischen Groß- und Kleinschreibung unterschieden.

W3Schools

Pseudo-Klassen und HTML-Klassen

Pseudo-Klassen können mit HTML-Klassen kombiniert werden:

Wenn Sie den Mauszeiger über den Link im Beispiel bewegen, ändert er seine Farbe:

a.highlight:hover {
  color: #ff0000;
}

Ein Beispiel für die Verwendung der Pseudoklasse :hover für ein <div>-Element:

div:hover {
  background-color: blue;
}

Bewegen Sie den Mauszeiger über ein <div>-Element, um ein <p>-Element anzuzeigen (wie ein Tooltip):

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

Die :first-child Pseudoklasse

Die Pseudoklasse :first-child passt zu einem angegebenen Element, das das erste Kind eines anderen Elements ist.

Im folgenden Beispiel passt der Selektor auf jedes <p>-Element, das das erste Kind eines beliebigen Elements ist:

p:first-child {
  color: blue;
}

Alle CSS-Pseudoklassen

Selector	Beispiel	Beispielhafte Beschreibung
:active	a:active	Wählt den aktiven Link aus
:checked	input:checked	Wählt jedes angekreuzte <input>-Element aus
:disabled	input:disabled	Wählt jedes deaktivierte <input>-Element aus
:empty	p:empty	Wählt jedes <p>-Element aus, das keine Kinder hat
:enabled	input:enabled	Wählt jedes aktivierte <input>-Element aus
:first-child	p:first-child	Wählt jedes <p>-Element aus, das das erste Kind seines Elternteils ist
:first-of-type	p:first-of-type	Wählt jedes <p>-Element aus, das das erste <p>-Element seiner Eltern ist
:focus	input:focus	Wählt das <input>-Element aus, das den Fokus hat
:hover	a:hover	Selektiert Links beim Überfahren mit der Maus
:in-range	input:in-range	Wählt <input>-Elemente mit einem Wert innerhalb eines bestimmten Bereichs aus
:invalid	input:invalid	Selektiert alle <input>-Elemente mit einem ungültigen Wert
:lang(language)	p:lang(it)	Wählt jedes <p>-Element aus, dessen Wert für das lang-Attribut mit „it“ beginnt
:last-child	p:last-child	Wählt jedes <p>-Element aus, das das letzte Kind seiner Eltern ist
:last-of-type	p:last-of-type	Wählt jedes <p>-Element aus, das das letzte <p>-Element seiner Eltern ist
:link	a:link	Markiert alle nicht besuchten Links
:not(selector)	:not(p)	Wählt jedes Element aus, das kein <p>-Element ist
:nth-child(n)	p:nth-child(2)	Wählt jedes <p>-Element aus, das das zweite Kind seines Elternteils ist
:nth-last-child(n)	p:nth-last-child(2)	Wählt jedes <p>-Element aus, das das zweite Kind seines Elternteils ist, beginnend mit dem letzten Kind
:nth-last-of-type(n)	p:nth-last-of-type(2)	Wählt jedes <p>-Element aus, das das zweite <p>-Element seiner Eltern ist, beginnend mit dem letzten Kind
:nth-of-type(n)	p:nth-of-type(2)	Wählt jedes <p>-Element aus, das das zweite <p>-Element seiner Eltern ist
:only-of-type	p:only-of-type	Wählt jedes <p>-Element aus, das das einzige <p>-Element seiner Eltern ist
:only-child	p:only-child	Wählt jedes <p>-Element aus, das das einzige Kind seines Elternteils ist
:optional	input:optional	Wählt <input>-Elemente ohne das Attribut „erforderlich“ aus
:out-of-range	input:out-of-range	Wählt <input>-Elemente mit einem Wert außerhalb eines bestimmten Bereichs aus
:read-only	input:read-only	Wählt <input>-Elemente mit einem „readonly“-Attribut aus
:read-write	input:read-write	Wählt <input>-Elemente ohne einem „readonly“-Attribut aus
:required	input:required	Wählt <input>-Elemente mit einem „required“-Attribut aus
:root	root	Wählt das Wurzelelement des Dokuments aus
:target	#news:target	Wählt das aktuell aktive #news-Element aus (wenn auf eine URL geklickt wird, die diesen Ankernamen enthält)
:valid	input:valid	Wählt alle <input>-Elemente mit einem gültigen Wert aus
:visited	a:visited	Selektiert alle besuchten Links

Alle CSS-Pseudoelemente

Selektor	Beispiel	Beispielhafte Beschreibung
::after	p::after	Inhalt nach jedem <p>-Element einfügen
::before	p::before	Fügt den Inhalt vor jedem <p>-Element ein
::first-letter	p::first-letter	Wählt den ersten Buchstaben eines jeden <p>-Elements aus
::first-line	p::first-line	Wählt die erste Zeile eines jeden <p>Elements aus
::selection	p::selection	Wählt den Teil eines Elements aus, der von einem Benutzer ausgewählt wird