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 verhalten sich oft so, als ob Sie einer Klasse zu einem Teil des Dokuments hinzugefügt hätten, was Ihnen hilft, unnötige Klassen in Ihrem Markup zu reduzieren und Ihnen flexibleren, pflegbareren Code zu geben.

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 der Klasse CSS hinzufügen, wie im ersten Beispiel unten gezeigt:

<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 ärgerlich zu pflegen sein – was, wenn ein neuer Absatz oben im Dokument 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 im Artikel anvisieren, und wir müssten das HTML nicht mehr bearbeiten (was vielleicht sowieso nicht immer möglich ist, möglicherweise, 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 auf diese Weise. Sie zielen auf einen Teil Ihres Dokuments ab, der sich in einem bestimmten Zustand befindet, und verhalten sich, als ob Sie eine Klasse in Ihr HTML eingefügt hätten. Sehen Sie sich einige andere Beispiele auf MDN an:

• :last-child
• :only-child
• :invalid

Einige Pseudo-Klassen gelten nur, wenn der Benutzer in irgendeiner Weise mit dem Dokument interagiert. Diese Benutzeraktions-Pseudo-Klassen, manchmal auch als dynamische Pseudo-Klassen bezeichnet, verhalten sich so, als ob eine Klasse zum Element hinzugefügt worden wäre, wenn der Benutzer damit interagiert. Beispiele dafür 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 die Verwendung von Tastatursteuerungen fokussiert.

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

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

a:hover {
  color: hotpink;
}

Pseudo-Elemente verhalten sich ähnlich. Sie verhalten sich jedoch so, als hätten Sie ein ganz neues HTML-Element in das Markup eingefügt, anstatt einer bestehenden Elementen eine Klasse hinzuzufügen.

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

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

Der ::first-line Pseudo-Element-Selektor wird dies für Sie zuverlässig tun – wenn die Anzahl der Wörter zunimmt oder abnimmt, wird es immer noch 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 verhält sich so, als ob ein <span> magisch um diese erste formatierte Zeile gewickelt wäre, und sie jedes Mal aktualisiert würde, wenn sich die Zeilenlänge ändert.

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

Wenn Sie die erste Zeile des ersten Absatzes fett machen möchten, könnten Sie die :first-child und ::first-line Selektoren verketten. Versuchen Sie, das vorherige Live-Beispiel zu bearbeiten, sodass es die folgende CSS verwendet. Wir sagen, dass wir die erste Zeile des ersten <p>-Elements auswählen möchten, das sich in einem <article>-Element 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.

Sie könnten diese verwenden, um eine Zeichenfolge einzufügen, wie im folgenden Live-Beispiel. Versuchen Sie, den Textwert der content Eigenschaft zu ändern und sehen Sie, wie er sich im Output ändert. Sie könnten auch das ::before Pseudo-Element in ::after ändern und sehen, dass der Text am Ende des Elements eingefügt wird, anstatt am Anfang.

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

.box::before {
  content: "This should show before the other content. ";
}

Das Einfügen von Textstrings aus CSS ist allerdings nicht etwas, das wir im Web sehr oft tun, da dieser Text für einige Bildschirmleser unzugänglich ist und möglicherweise schwer für jemanden zu finden und zu bearbeiten ist.

Ein gültigerer Verwendungszweck dieser Pseudo-Elemente ist das Einfügen eines Symbols, zum Beispiel der kleine Pfeil im folgenden Beispiel, der ein visuelles Indiz darstellt, das wir nicht von einem Bildschirmleser vorgelesen haben möchten:

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

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

Diese Pseudo-Elemente werden auch häufig verwendet, um eine leere Zeichenfolge einzufügen, die dann wie jedes Element auf der Seite gestaltet werden kann.

Im 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 gestalten können. Dann verwenden wir CSS, um es wie jedes Element zu gestalten. Sie können mit dem CSS spielen und ändern, wie es aussieht und sich verhält.

<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;
}

Die Verwendung der ::before und ::after Pseudo-Elemente zusammen mit der content-Eigenschaft wird in CSS als "Generated Content" bezeichnet, und Sie werden diese Technik oft für verschiedene Aufgaben verwendet sehen. Ein großartiges Beispiel ist die Seite CSS Arrow Please, die Ihnen dabei hilft, einen Pfeil mit CSS zu generieren. 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, sehen 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 eingeführt, die spezielle Arten von Selektoren sind.

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

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

• Referenz zu Pseudo-Klassen
• Referenz zu Pseudo-Elementen

• Zurück
• Übersicht: CSS-Bausteine
• Weiter