The CSS Podcast – 015: Pseudo-Klassen
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
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
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
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
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
:link
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
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
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
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
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
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
Mit der Pseudoklasse :only-child
können Sie auch Elemente auswählen, die keine Geschwister haben.
:first-of-type
und :last-of-type
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
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
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
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()
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()
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.
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