Pseudo-Klassen und Pseudo-Elemente

Eine Pseudo-Klasse ist ein Selektor, der Elemente auswählt, die sich in einem bestimmten Zustand befinden, z.B. das erste Element ihres Typs sind oder vom Mauszeiger überfahren werden. Sie wirken oft, als hätten Sie eine Klasse auf einen Teil Ihres Dokuments angewendet, wodurch Sie überflüssige Klassen in Ihrem Markup vermeiden und flexibleren, wartungsfreundlicheren Code erhalten.

Pseudo-Klassen sind Schlüsselwörter, die mit einem Doppelpunkt beginnen. Zum Beispiel ist :hover eine Pseudo-Klasse.

Schauen wir uns ein einfaches Beispiel an. Wenn wir den ersten Absatz in einem Artikel größer und fett machen wollten, könnten wir diesem Absatz eine Klasse hinzufügen und dann CSS für diese Klasse hinzufügen:

<article>
  <p class="first">
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

.first {
  font-size: 120%;
  font-weight: bold;
}

Dies könnte jedoch mühsam zu pflegen sein — was, wenn ein neuer Absatz am Anfang des Dokuments hinzugefügt wird? Wir müssten die Klasse auf den neuen Absatz verschieben. Anstatt die Klasse hinzuzufügen, könnten wir den :first-child Pseudo-Klassen-Selektor verwenden — dieser wird immer das erste Kindelement eines Elements (in diesem Fall das <article>) anvisieren, und wir müssten das HTML nicht mehr bearbeiten (was möglicherweise sowieso nicht möglich ist, vielleicht weil es von einem CMS generiert wird).

<article>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

article p:first-child {
  font-size: 120%;
  font-weight: bold;
}

Alle Pseudo-Klassen verhalten sich so. Sie zielen auf einen Teil Ihres Dokuments ab, der sich in einem bestimmten Zustand befindet, als hätten Sie eine Klasse in Ihr HTML eingefügt.

Einige Pseudo-Klassen wenden sich nur an, wenn der Benutzer in irgendeiner Weise mit dem Dokument interagiert. Diese Benutzeraktions-Pseudo-Klassen, manchmal auch dynamische Pseudo-Klassen genannt, verhalten sich so, als wäre eine Klasse hinzugefügt worden, wenn der Benutzer mit dem Element interagiert. Beispiele sind:

• :hover — oben erwähnt; dies gilt nur, wenn der Benutzer seinen Zeiger über ein Element bewegt, typischerweise einen Link.
• :focus — gilt nur, wenn der Benutzer das Element durch Klicken oder Verwenden der Tastatursteuerelemente fokussiert.

<p><a href="">Hover over me</a></p>

a:link,
a:visited {
  color: rebeccapurple;
  font-weight: bold;
}

a:hover {
  color: hotpink;
}

Gehen Sie zurück zu unserem ersten Pseudo-Klassen-Beispiel und bearbeiten Sie das CSS mit dem MDN-Spielplatz:

1. Fügen Sie eine Regel hinzu, die den Text des Absatzes blau färbt, wenn er überfahren wird.
2. Fügen Sie eine Regel hinzu, die nur den letzten Absatz innerhalb des Artikels auswählt und ihm eine orange background-color zuweist.

Sie finden Informationen zu allen anderen verfügbaren Pseudo-Klassen auf der MDN Pseudo-Klassen Referenzseite.

Pseudo-Elemente verhalten sich auf ähnliche Weise. Sie wirken jedoch so, als hätten Sie ein ganz neues HTML-Element in das Markup eingefügt, anstatt eine Klasse auf vorhandene Elemente anzuwenden.

Pseudo-Elemente beginnen mit einem Doppel-Doppelpunkt ::. ::before ist ein Beispiel für ein Pseudo-Element.

Wenn Sie beispielsweise die erste Zeile eines Absatzes auswählen wollten, könnten Sie sie in ein <span>-Element einwickeln und einen Elementselektor verwenden; jedoch würde das fehlschlagen, wenn die Anzahl der eingebundenen Wörter länger oder kürzer als die Breite des übergeordneten Elements wäre. Da wir tendenziell nicht wissen, wie viele Wörter in eine Zeile passen werden — da sich dies ändern wird, wenn sich die Bildschirmbreite oder Schriftgröße ändert — ist es unmöglich, dies durch Hinzufügen von HTML robust zu erreichen.

Der ::first-line Pseudo-Element-Selektor wird dies zuverlässig für Sie tun — wenn sich die Anzahl der Wörter erhöht oder verringert, wird er dennoch nur die erste Zeile auswählen.

<article>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

article p::first-line {
  font-size: 120%;
  font-weight: bold;
}

Es wirkt so, als wäre ein <span> magisch um diese erste formatierte Zeile gewickelt und würde jedes Mal aktualisiert, wenn sich die Zeilenlänge ändert.

Sie sehen, dass dies die erste Zeile beider Absätze auswählt.

Bearbeiten Sie das CSS des vorherigen Beispiels mit dem MDN-Spielplatz:

1. Fügen Sie eine Regel hinzu, die den Bereich des Textes, der mit dem Mauszeiger ausgewählt wurde, eine rote background-color gibt (Sie benötigen dafür das ::selection Pseudo-Element). Wählen Sie etwas Text aus, um es zu testen.
2. Fügen Sie eine Regel hinzu, die dem ersten Buchstaben jedes <p> innerhalb des <article>:

• Eine gelbe background-color.
• Einen 1px solid schwarzen Rand.
• Eine Schriftgröße von 2rem.

Sie finden Informationen zu allen anderen verfügbaren Pseudo-Elementen auf der MDN Pseudo-Elemente Referenzseite.

Wenn Sie die erste Zeile des ersten Absatzes fett machen wollten, könnten Sie die :first-child und ::first-line Selektoren zusammenketten.

Versuchen Sie, das vorherige Beispiel so zu bearbeiten, dass es das folgende CSS verwendet. Wir sagen, dass wir die erste Zeile des ersten <p>-Elements auswählen wollen, das sich innerhalb eines <article>-Elements befindet.

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

Es gibt ein paar spezielle Pseudo-Elemente, die zusammen mit der content Eigenschaft verwendet werden, um Inhalte mit CSS in Ihr Dokument einzufügen. Diese Technik wird als generierter Inhalt bezeichnet.

Sie könnten es verwenden, um eine Zeichenfolge einzufügen, wie im Beispiel unten. Wir haben dem generierten Inhalt auch einen gelben Hintergrund gegeben, damit er sich leicht von den Absatzinhalten unterscheiden lässt.

<p class="box">Content in the box in my HTML page.</p>

.box::before {
  content: "This should show before the other content. ";
  background-color: yellow;
}

Versuchen Sie, das vorherige Beispiel wie folgt zu bearbeiten:

• Ändern Sie den Textwert der content Eigenschaft und sehen Sie, wie er sich in der Ausgabe ändert.
• Ändern Sie das ::before Pseudo-Element zu ::after und sehen Sie, wie der Text am Ende des Elements statt zu Beginn eingefügt wird.

Das obige Beispiel ist gültiges CSS. Allerdings ist das Einfügen von Textzeichenfolgen aus CSS etwas, das wir nicht sehr oft tun, da dieser Text für einige Screenreader unzugänglich ist und es schwierig sein könnte, ihn in Zukunft zu finden und zu bearbeiten. Eine valide Verwendung dieser Pseudo-Elemente ist es, ein Symbol einzufügen, zum Beispiel den kleinen Pfeil, der im Beispiel unten hinzugefügt wird, der ein visuelles Indiz ist, das nicht von einem Screenreader vorgelesen werden soll:

<p class="box">Content in the box in my HTML page.</p>

.box::after {
  content: " ➥";
}

Generierte Inhalte werden auch häufig verwendet, um eine leere Zeichenfolge einzufügen, die dann wie jedes Element auf der Seite gestylt werden kann.

In diesem nächsten Beispiel haben wir eine leere Zeichenfolge mit dem ::before Pseudo-Element hinzugefügt. Wir haben dies auf display: block gesetzt, damit wir es mit einer Breite und Höhe stylen können und eine quadratische Form erstellen. Dann verwenden wir CSS, um es wie jedes andere Element zu stylen.

<p class="box">Content in the box in my HTML page.</p>

.box::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  border: 1px solid black;
}

Versuchen Sie mit dem obigen CSS herumzuspielen, um zu ändern, wie die generierte Form aussieht und sich verhält.

Sie werden regelmäßig sehen, dass generierte Inhalte für verschiedene andere Aufgaben verwendet werden. Ein großartiges Beispiel ist die Seite CSS Arrow Please, die Ihnen hilft, einen Pfeil mit CSS zu erstellen. Sehen Sie sich das CSS an, während Sie Ihren Pfeil erstellen, und Sie werden die ::before und ::after Pseudo-Elemente in Verwendung sehen. Wann immer Sie diese Selektoren sehen, schauen Sie sich die content Eigenschaft an, um zu sehen, was dem HTML-Element hinzugefügt wird.

In diesem Artikel haben wir CSS-Pseudo-Klassen und Pseudo-Elemente vorgestellt, die besondere Arten von Selektoren sind.

Pseudo-Klassen ermöglichen es Ihnen, ein Element anzusprechen, wenn es sich in einem bestimmten Zustand befindet, als hätten Sie eine Klasse für diesen Zustand dem DOM hinzugefügt. Pseudo-Elemente wirken so, als hätten Sie ein ganz neues Element zum DOM hinzugefügt und ermöglichen es Ihnen, dieses zu stylen. Die ::before und ::after Pseudo-Elemente ermöglichen es Ihnen, Inhalte unter Verwendung von CSS in das Dokument einzufügen.

Im nächsten Artikel werden wir über Kombinatoren lernen.

• Pseudo-Klassen Übersicht
• Pseudo-Elemente Übersicht

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter