Zum Inhalt springen

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

fdf16ffe47ab41618e4d83ddb711b47a 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

SelectorBeispielBeispielhafte Beschreibung
:activea:activeWählt den aktiven Link aus
:checkedinput:checkedWählt jedes angekreuzte <input>-Element aus
:disabledinput:disabledWählt jedes deaktivierte <input>-Element aus
:emptyp:emptyWählt jedes <p>-Element aus, das keine Kinder hat
:enabledinput:enabledWählt jedes aktivierte <input>-Element aus
:first-childp:first-childWählt jedes <p>-Element aus, das das erste Kind seines Elternteils ist
:first-of-typep:first-of-typeWählt jedes <p>-Element aus, das das erste <p>-Element seiner Eltern ist
:focusinput:focusWählt das <input>-Element aus, das den Fokus hat
:hovera:hoverSelektiert Links beim Überfahren mit der Maus
:in-rangeinput:in-rangeWählt <input>-Elemente mit einem Wert innerhalb eines bestimmten Bereichs aus
:invalidinput:invalidSelektiert 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-childp:last-childWählt jedes <p>-Element aus, das das letzte Kind seiner Eltern ist
:last-of-typep:last-of-typeWählt jedes <p>-Element aus, das das letzte <p>-Element seiner Eltern ist
:linka:linkMarkiert 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-typep:only-of-typeWählt jedes <p>-Element aus, das das einzige <p>-Element seiner Eltern ist
:only-childp:only-childWählt jedes <p>-Element aus, das das einzige Kind seines Elternteils ist
:optionalinput:optionalWählt <input>-Elemente ohne das Attribut „erforderlich“ aus
:out-of-rangeinput:out-of-rangeWählt <input>-Elemente mit einem Wert außerhalb eines bestimmten Bereichs aus
:read-onlyinput:read-onlyWählt <input>-Elemente mit einem „readonly“-Attribut aus
:read-writeinput:read-writeWählt <input>-Elemente ohne einem „readonly“-Attribut aus
:requiredinput:requiredWählt <input>-Elemente mit einem „required“-Attribut aus
:rootrootWählt das Wurzelelement des Dokuments aus
:target#news:targetWählt das aktuell aktive #news-Element aus (wenn auf eine URL geklickt wird, die diesen Ankernamen enthält)
:validinput:validWählt alle <input>-Elemente mit einem gültigen Wert aus
:visiteda:visitedSelektiert alle besuchten Links

Alle CSS-Pseudoelemente

SelektorBeispielBeispielhafte Beschreibung
::afterp::afterInhalt nach jedem <p>-Element einfügen
::beforep::beforeFügt den Inhalt vor jedem <p>-Element ein
::first-letterp::first-letterWählt den ersten Buchstaben eines jeden <p>-Elements aus
::first-linep::first-lineWählt die erste Zeile eines jeden <p>Elements aus
::selectionp::selectionWählt den Teil eines Elements aus, der von einem Benutzer ausgewählt wird
Kai Spriestersbach