Pseudoklassen

Angenommen, Sie haben ein Anmeldeformular für E-Mails und möchten, dass das E-Mail-Formularfeld einen roten Rahmen hat, wenn es eine ungültige E-Mail-Adresse enthält. Wie gehen Sie dabei vor? Sie können die CSS-Pseudoklasse :invalid verwenden, eine von vielen vom Browser bereitgestellten Pseudoklassen.

Mit einer Pseudoklasse können Sie Stile basierend auf Statusänderungen und externen Faktoren anwenden. Das bedeutet, dass Ihr Design auf Nutzereingaben wie eine ungültige E-Mail-Adresse reagieren kann. Diese werden im Modul Auswahlen ausführlicher behandelt.

Im Gegensatz zu Pseudoelementen, über die Sie im vorherigen Modul mehr erfahren, werden Pseudo-Klassen an bestimmte Zustände angehängt, in denen sich ein Element befinden kann, anstatt Teile dieses Elements allgemein zu stylen.

Interaktive Status

Die folgenden Pseudoklassen werden aufgrund einer Interaktion eines Nutzers mit Ihrer Seite angewendet.

:hover

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 2.

Source

Wenn ein Nutzer ein Zeigegerät wie eine Maus oder ein Touchpad verwendet und es auf ein Element bewegt, können Sie mit :hover auf diesen Zustand reagieren und Stile anwenden. So können Sie andeuten, dass mit einem Element interagiert werden kann.

:active

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Dieser Status wird ausgelöst, wenn mit einem Element aktiv interagiert wird, z. B. durch einen Klick, bevor der Klick losgelassen wird. Wenn ein Zeigegerät wie eine Maus verwendet wird, ist dieser Status zu Beginn des Klicks und bevor er losgelassen wird.

:focus, :focus-within und :focus-visible

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Wenn ein Element den Fokus erhalten kann, z. B. ein <button>, können Sie mit der Pseudoklasse :focus auf diesen Status reagieren.

Mit :focus-within können Sie auch reagieren, wenn ein untergeordnetes Element Ihres Elements den Fokus erhält.

Bei fokussierbaren Elementen wie Schaltflächen wird ein Fokusring angezeigt, wenn sie den Fokus haben – auch wenn sie angeklickt werden. In diesem Fall wendet ein Entwickler das folgende CSS an:

button:focus {
    outline: none;
}

Dieses CSS entfernt den Standard-Browser-Fokusring, wenn ein Element den Fokus erhält. Das stellt ein Problem für die Barrierefreiheit für Nutzer dar, die eine Webseite mit der Tastatur bedienen. Wenn kein Fokusstil vorhanden ist, kann er nicht verfolgen, wo sich der Fokus derzeit befindet, wenn er die Taste Tab verwendet. Mit :focus-visible können Sie einen Fokusstil anzeigen, wenn ein Element über die Tastatur den Fokus erhält, und gleichzeitig mit der Regel outline: none verhindern, dass dies geschieht, wenn ein Zeigergerät damit interagiert.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.3.

Source

Mit der Pseudoklasse :target wird ein Element ausgewählt, das ein id enthält, das mit einem URL-Fragment übereinstimmt. Angenommen, Sie haben die folgende HTML-Datei:

<article id="content">
    …
</article>

Sie können diesem Element Stile zuweisen, wenn die URL #content enthält.

#content:target {
    background: yellow;
}

Das ist nützlich, um Bereiche hervorzuheben, die möglicherweise über einen Sprunglink speziell verlinkt wurden, z. B. den Hauptinhalt einer Website.

Bisherige Status

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Der Pseudo-Klasse :link kann auf jedes <a>-Element angewendet werden, dessen href-Wert noch nicht besucht wurde.

:visited

Mit der Pseudoklasse :visited können Sie einen Link formatieren, der vom Nutzer bereits besucht wurde. Dies ist der entgegengesetzte Zustand zu :link, aber aus Sicherheitsgründen stehen Ihnen weniger CSS-Eigenschaften zur Verfügung. Sie können nur color, background-color, border-color, outline-color und die Farbe von SVG-Elementen fill und stroke stylen.

Reihenfolge ist wichtig

Wenn Sie einen :visited-Stil definieren, kann er von einer Link-Pseudoklasse mit mindestens gleicher Spezifität überschrieben werden. Aus diesem Grund wird empfohlen, die LVHA-Regel für das Stylen von Links mit Pseudoklassen in einer bestimmten Reihenfolge zu verwenden: :link, :visited, :hover, :active.

a:link {}
a:visited {}
a:hover {}
a:active {}

Formularstatus

Mit den folgenden Pseudoklassen können Sie Formularelemente in den verschiedenen Status auswählen, in denen sich diese Elemente während der Interaktion mit ihnen befinden können.

:disabled und :enabled

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

Wenn ein Formularelement wie ein <button> vom Browser deaktiviert wird, können Sie diesen Status mit dem Pseudoklassifizierer :disabled verknüpfen. Der Pseudo-Klasse :enabled ist für den umgekehrten Zustand verfügbar. Da Formularelemente standardmäßig auch :enabled sind, werden Sie diese Pseudo-Klasse möglicherweise nicht verwenden.

:checked und :indeterminate

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

Der Pseudo-Klassenname :checked ist verfügbar, wenn ein unterstützendes Formularelement wie ein Kästchen oder Optionsfeld angeklickt ist.

Der Status :checked ist binär(wahr oder falsch), aber Kästchen haben einen Zwischenstatus, wenn sie weder angeklickt noch abgewählt sind. Dies wird als :indeterminate-Status bezeichnet.

Ein Beispiel für diesen Zustand ist ein Steuerelement „Alle auswählen“, das alle Kästchen in einer Gruppe anklickt. Wenn der Nutzer dann eines dieser Kästchen deaktiviert, entspricht das übergeordnete Kästchen nicht mehr dem Status „alle ausgewählt“ und sollte in einen unbestimmten Status versetzt werden.

Das <progress>-Element hat auch einen unbestimmten Zustand, der gestaltet werden kann. Ein häufiger Anwendungsfall ist die Verwendung von Streifen, um anzuzeigen, dass nicht bekannt ist, wie viel noch benötigt wird.

:placeholder-shown

Browser Support

  • Chrome: 47.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 9.

Source

Wenn ein Formularfeld ein placeholder-Attribut und keinen Wert hat, kann der Pseudoklass :placeholder-shown verwendet werden, um diesem Zustand Stile hinzuzufügen. Sobald das Feld Inhalte enthält, gilt dieser Status nicht mehr, unabhängig davon, ob es ein placeholder enthält oder nicht.

Validierungsstatus

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Sie können auf die HTML-Formularvalidierung mit Pseudoklassen wie :valid, :invalid und :in-range reagieren. Die Pseudoklassen :valid und :invalid sind nützlich für Kontexte wie ein E-Mail-Feld mit einer pattern, die abgeglichen werden muss, damit es ein gültiges Feld ist. Dieser gültige Wertstatus kann dem Nutzer angezeigt werden, damit er weiß, dass er sicher mit dem nächsten Feld fortfahren kann.

Der Pseudoklass :in-range ist verfügbar, wenn eine Eingabe ein min und ein max hat, z. B. eine numerische Eingabe und der Wert innerhalb dieser Grenzen liegt.

Bei HTML-Formularen können Sie mit dem required-Attribut festlegen, dass ein Feld erforderlich ist. Die Pseudoklasse :required ist für Pflichtfelder verfügbar. Nicht erforderliche Felder können mit dem Pseudoklassifizierer :optional ausgewählt werden.

Elemente nach Index, Reihenfolge und Vorkommen auswählen

Es gibt eine Gruppe von Pseudoklassen, mit denen Elemente anhand ihrer Position im Dokument ausgewählt werden.

:first-child und :last-child

Browser Support

  • Chrome: 4.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 3.1.

Source

Wenn Sie den ersten oder letzten Artikel suchen möchten, verwenden Sie :first-child und :last-child. Mit diesen Pseudoklassen wird entweder das erste oder das letzte Element in einer Gruppe von Geschwisterelementen zurückgegeben.

:only-child

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

Source

Mit der Pseudoklasse :only-child können Sie auch Elemente auswählen, die keine Geschwister haben.

:first-of-type und :last-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Sie können :first-of-type und :last-of-type auswählen, die auf den ersten Blick die gleiche Funktion wie :first-child und :last-child haben. Sehen Sie sich aber diesen HTML-Code an:

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

Und dieses CSS:

.my-parent div:first-child {
    color: red;
}

Es würden keine Elemente rot eingefärbt werden, da das erste untergeordnete Element ein Absatz und kein div-Element ist. Die Pseudoklasse :first-of-type ist in diesem Zusammenhang nützlich.

.my-parent div:first-of-type {
    color: red;
}

Auch wenn das erste <div> das zweite untergeordnete Element ist, ist es das erste Element dieses Typs im .my-parent-Element. Daher wird es mit dieser Regel rot eingefärbt.

:nth-child und :nth-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Sie sind auch nicht auf erste und letzte untergeordnete Elemente und Typen beschränkt. Mit den Pseudoklassen :nth-child und :nth-of-type können Sie ein Element an einem bestimmten Index angeben. Die Indexierung in CSS-Selektoren beginnt bei 1.

Sie können diesen Pseudoklassen auch mehr als einen Index übergeben. Wenn Sie alle geraden Elemente auswählen möchten, können Sie :nth-child(even) verwenden.

Mit der An+B-Mikrosyntax können Sie auch komplexere Auswählten erstellen, mit denen Elemente in regelmäßigen Abständen gefunden werden.

li:nth-child(3n+3) {
    background: yellow;
}

Mit dieser Auswahl werden alle drei Elemente ausgewählt, beginnend mit Element 3. n in diesem Ausdruck ist der Index, der bei null beginnt. Die 3 (3n) gibt an, mit welchem Wert der Index multipliziert wird.

Angenommen, Sie haben 7 <li>-Elemente. Das erste ausgewählte Element ist 3, da 3n+3 in (3 * 0) + 3 umgewandelt wird. Bei der nächsten Iteration wird Element 6 ausgewählt, da n jetzt auf 1 erhöht wurde, also (3 * 1) + 3). Dieser Ausdruck funktioniert sowohl für :nth-child als auch für :nth-of-type.

Sie können diese Art von Auswahl mit diesem Tester für das n-te Kind oder diesem Tool zur Auswahl der Anzahl ausprobieren.

:only-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Mit :only-of-type können Sie das einzige Element eines bestimmten Typs in einer Gruppe von Geschwistern finden. Das ist hilfreich, wenn Sie Listen mit nur einem Element auswählen oder das einzige fett formatierte Element in einem Absatz finden möchten.

Leere Elemente finden

Manchmal ist es hilfreich, vollständig leere Elemente zu identifizieren. Auch dafür gibt es eine Pseudoklasse.

:empty

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

Wenn ein Element keine untergeordneten Elemente hat, gilt für es der Pseudo-Klassenname :empty. Untergeordnete Elemente sind jedoch nicht nur HTML-Elemente oder Textknoten: Sie können auch Leerzeichen sein. Das kann verwirrend sein, wenn Sie beim Debuggen des folgenden HTML-Codes herausfinden möchten, warum er nicht mit :empty funktioniert:

<div>
</div>

Der Grund dafür ist, dass sich zwischen dem öffnenden und dem schließenden <div> ein Leerraum befindet. „Leeres“ funktioniert also nicht.

Die Pseudoklasse :empty kann nützlich sein, wenn Sie nur wenig Kontrolle über die HTML-Datei haben und leere Elemente wie einen WYSIWYG-Inhaltseditor ausblenden möchten. Hier hat ein Redakteur einen leeren Absatz hinzugefügt.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

Mit :empty können Sie sie finden und ausblenden.

.post :empty {
    display: none;
}

Mehrere Elemente finden und ausschließen

Mit einigen Pseudoklassen können Sie kompakteren CSS-Code schreiben.

:is()

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78.
  • Safari: 14.

Source

Wenn Sie alle untergeordneten Elemente h2, li und img in einem .post-Element finden möchten, könnten Sie eine Auswahlliste wie diese schreiben:

.post h2,
.post li,
.post img {
    
}

Mit der Pseudoklasse :is() können Sie eine kompaktere Version schreiben:

.post :is(h2, li, img) {
    
}

Die Pseudoklasse :is ist nicht nur kompakter als eine Auswahlliste, sondern auch fehlertoleranter. Wenn in einer Auswahlliste ein Fehler oder ein nicht unterstützter Selektor vorhanden ist, funktioniert in den meisten Fällen die gesamte Auswahlliste nicht mehr. Wenn in den übergebenen Selektoren in einer :is-Pseudoklasse ein Fehler auftritt, wird der ungültige Selektor ignoriert, aber die gültigen Selektoren werden verwendet.

:not()

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

Sie können Elemente auch mit der Pseudoklasse :not() ausschließen. So können Sie beispielsweise alle Links formatieren, die kein class-Attribut haben.

a:not([class]) {
    color: blue;
}

Mit einer :not-Pseudoklasse können Sie auch die Barrierefreiheit verbessern. Ein <img> muss beispielsweise ein alt haben, auch wenn es sich um einen leeren Wert handelt. Sie könnten also eine CSS-Regel schreiben, die ungültigen Bildern einen dicken roten Umriss hinzufügt:

img:not([alt]) {
    outline: 10px red;
}

Wissen testen

Ihr Wissen über Pseudoklassen testen

Pseudoklassen wirken, als wäre eine Klasse dynamisch auf ein Element angewendet worden, während Pseudoelemente auf ein Element selbst wirken.

Falsch
Richtig

Welche der folgenden Pseudoklassen sind funktional?

:not()
:target
:empty
:is()

Welche der folgenden Pseudoklassen sind auf eine Nutzerinteraktion zurückzuführen?

:focus-within
:press
:squeeze
:hover
:target

Welche der folgenden Pseudoklassen sind <form>-Status?

:in-range
:enabled
:valid
:checked
:indeterminate
:fresh
:loading