CSS-Pseudo-Klasse

Was ist eine Pseudo-Klasse?

Pseudo-Klassen werden verwendet, um spezielle Zustände von Elementen zu definieren.

Zum Beispiel kann es verwendet werden, um:

  • Stellen Sie den Stil für das Element beim Cursorüberschreiten ein
  • Stellen Sie unterschiedliche Stile für besuchte und unbesuchte Links ein
  • Stellen Sie den Stil für das Element beim Ermöglichen des Fokus ein
Bewegen Sie den Mauszeiger über mich

Syntax

Syntax der Pseudo-Klassen:

selector:pseudo-class {
  property: value;
}

Anker-Pseudo-Klasse

Links können auf verschiedene Weise angezeigt werden:

Beispiel

/* Unbesuchter Link */
a:link {
  color: #FF0000;
}
/* Besuchteter Link */
a:visited {
  color: #00FF00;
}
/* Link bei Cursorüberschreitung */
a:hover {
  color: #FF00FF;
}
/* Ausgewählter Link */
a:active {
  color: #0000FF;
}

Versuchen Sie es selbst

Hinweis:a:hover muss nach dem CSS-Definitionen a:link und a:visited erscheinen, um wirksam zu sein!a:active muss nach dem CSS-Definitionen a:hover erscheinen erst nach dem Speichern! Die Namen der Pseudo-Klassen sind nicht auf Groß- und Kleinschreibung angewiesen.

Pseudo-Klassen und CSS-Klassen

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

Wenn Sie den Mauszeiger auf den Link im Beispiel bewegen, ändert sich die Farbe:

Beispiel

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

Versuchen Sie es selbst

Bewegen Sie den Mauszeiger über den <div>

Verwendung auf dem <div>-Element :hover Pseudo-Klassen-Beispiel:

Beispiel

div:hover {
  background-color: blue;
}

Versuchen Sie es selbst

Einfache Tool-Tip-Überschuß

Bewegen Sie den Mauszeiger über das <div>-Element, um das <p>-Element anzuzeigen (ähnlich einem Tool-Tip-Effekt):

Bewegen Sie den Mauszeiger darauf, um das <p>-Element anzuzeigen.

Hehe, ich bin hier!

Beispiel

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

Versuchen Sie es selbst

CSS - :first-child Pseudo-Klasse

:first-child Pseudo-Klassen passen zu spezifischen Elementen: Das Element ist das erste Kind eines anderen Elements.

Ersten <p>-Element auswählen

In den folgenden Beispielen wählt der Selector alle <p>-Elemente, die als erster Kind-Element eines beliebigen Elements sind:

Beispiel

p:first-child {
  color: blue;
}

Versuchen Sie es selbst

Alle <i>-Elemente in allen <p>-Elementen auswählen

In den folgenden Beispielen wählt der Selector alle <i>-Elemente im ersten <p>-Element:

Beispiel

p i:first-child {
  color: blue;
}

Versuchen Sie es selbst

Alle <i>-Elemente in den ersten <p>-Elementen auswählen

In den folgenden Beispielen wählt der Selector alle <i>-Elemente in den <p>-Elementen aus, die als erster Kind-Element eines anderen Elements sind:

Beispiel

p:first-child i {
  color: blue;
}

Versuchen Sie es selbst

CSS - :lang Pseudo-Klasse

:lang Pseudo-Klassen erlauben es Ihnen, spezielle Regeln für verschiedene Sprachen zu definieren.

In den folgenden Beispielen::lang Definieren Sie für das <q>-Element mit dem Attribut lang="en" die Anführungszeichen:

Beispiel

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Einige Text <q lang="no">Ein Zitat in einem Absatz</q> Einige Text.</p>
</body>
</html>

Versuchen Sie es selbst

Mehr Beispiele

Stile für Hyperlinks hinzufügen
Dieses Beispiel zeigt, wie man andere Stile zu Hyperlinks hinzufügt.
Verwenden Sie :focus
Dieses Beispiel zeigt, wie man den Pseudo-Klassen :focus verwendet.

Alle CSS-Pseudo-Klassen

Selektor Beispiel Beispielbeschreibung
:active a:active Wählen Sie aktive Links.
:checked input:checked Wählen Sie jedes ausgewählte <input>-Element.
:disabled input:disabled Wählen Sie jedes deaktivierte <input>-Element.
:empty p:empty Wählen Sie jeden <p>-Element ohne Unter-elemente.
:enabled input:enabled Wählen Sie jedes aktivierte <input>-Element.
:first-child p:first-child Wählen Sie jedes <p>-Element, das als erstes Kind seines Elternelements ist.
:first-of-type p:first-of-type Wählen Sie jedes <p>-Element, das als erstes <p>-Element seines Elternelements ist.
:focus input:focus Wählen Sie das <input>-Element, das den Fokus hat.
:hover a:hover Wählen Sie den Link, über den der Mauszeiger sich befindet.
:in-range input:in-range Wählen Sie <input>-Elemente mit Werten in einem bestimmten Bereich.
:invalid input:invalid Wählen Sie alle <input>-Elemente mit ungültigen Werten.
:lang(language) p:lang(it) Wählen Sie jedes <p>-Element, dessen lang-Attribut mit "it" beginnt.
:last-child p:last-child Wählen Sie jedes <p>-Element, das als letztes Kind seines Elternelements ist.
:last-of-type p:last-of-type Wählen Sie jedes <p>-Element, das als letztes <p>-Element seines Elternelements ist.
:link a:link Wählen Sie alle nicht besuchten Links.
:not(selector) :not(p) Wählen Sie jedes Element, das kein <p>-Element ist.
:nth-child(n) p:nth-child(2) Wählen Sie jedes <p>-Element, das als zweites Kind seines Elternelements ist.
:nth-last-child(n) p:nth-last-child(2) Wählen Sie jedes <p>-Element, das als zweites Kind seines Elternelements ist, beginnend mit dem letzten Kind.
:nth-last-of-type(n) p:nth-last-of-type(2) Wählen Sie jedes <p>-Element, das als zweites <p>-Element seines Elternelements ist, beginnend mit dem letzten Kind.
:nth-of-type(n) p:nth-of-type(2) Wählen Sie jedes <p>-Element, das als zweites <p>-Element seines Elternelements ist.
:only-of-type p:only-of-type Wählen Sie jedes <p>-Element, das als einziger <p>-Element seines Elternelements ist.
:only-child p:only-child Wählen Sie das <p>-Element als einziges Kind seines Elternelements.
:optional optional Wählen Sie die <input>-Elemente aus, die das "required"-Attribut nicht haben.
:out-of-range input:out-of-range Wählen Sie die <input>-Elemente aus, deren Wert außerhalb des angegebenen Bereichs liegt.
:read-only input:read-only Wählen Sie die <input>-Elemente aus, die das "readonly"-Attribut haben.
:read-write input:read-write Wählen Sie die <input>-Elemente aus, die das "readonly"-Attribut nicht haben.
:required input:required Wählen Sie die <input>-Elemente aus, die das "required"-Attribut haben.
:root root Wählen Sie den Wurzelelement des Elements aus.
:target #news:target Wählen Sie das aktuelle aktive #news-Element aus (klicken Sie auf die URL, die den Anchor-Namen enthält).
:valid input:valid Wählen Sie alle <input>-Elemente mit gültigen Werten aus.
:visited a:visited Wählen Sie alle besuchten Links aus.

Alle CSS Pseudo-Elemente

Selektor Beispiel Beispielbeschreibung
::after p::after Fügen Sie Inhalt nach jedem <p>-Element ein.
::before p::before Fügen Sie Inhalt vor jedem <p>-Element ein.
::first-letter p::first-letter Wählen Sie die erste Buchstabe jedes <p>-Elements aus.
::first-line p::first-line Wählen Sie die erste Zeile jedes <p>-Elements aus.
::selection p::selection Wählen Sie den Teil des Elements aus, das der Benutzer ausgewählt hat.