Pseudoklassen

The CSS Podcast – 015: Pseudo-classes

Angenommen, Sie haben ein Formular für die E‑Mail-Registrierung 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, die eine von vielen vom Browser bereitgestellten Pseudoklassen ist.

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 Selektoren behandelt. In diesem Modul werden sie genauer erläutert.

Im Gegensatz zu Pseudoelementen, über die Sie im vorherigen Modul mehr erfahren können, beziehen sich Pseudoklassen auf bestimmte Zustände, in denen sich ein Element befinden kann, anstatt Teile dieses Elements allgemein zu formatieren.

Interaktive Status

Die folgenden Pseudoklassen werden aufgrund einer Nutzerinteraktion mit Ihrer Seite angewendet.

:hover

Wenn ein Nutzer ein Zeigegerät wie eine Maus oder ein Trackpad hat und es über ein Element bewegt, können Sie mit :hover Stile anwenden. So können Sie Nutzern auf einfache Weise signalisieren, dass sie mit einem Element interagieren können.

:active

Dieser Status wird ausgelöst, wenn ein Element aktiv verwendet wird, z. B. durch Klicken, bevor der Klick losgelassen wird. Wenn ein Zeigegerät wie eine Maus verwendet wird, ist dies der Zustand, in dem der Klick beginnt und noch nicht losgelassen wurde.

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

Wenn ein Element fokussierbar ist, z. B. ein <button>, können Sie mit der Pseudoklasse :focus auf diesen Status reagieren.

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

Fokussierbare Elemente wie Schaltflächen haben einen Fokusring, wenn sie fokussiert sind – auch wenn sie angeklickt werden. In einer solchen Situation wendet ein Entwickler das folgende CSS an:

button:focus {     outline: none; } 

Mit diesem CSS wird der Standardfokusring des Browsers entfernt, wenn ein Element den Fokus erhält. Das stellt ein Problem für Nutzer dar, die mit der Tastatur auf einer Webseite navigieren. Wenn kein Fokusstil vorhanden ist, können sie nicht nachvollziehen, wo sich der Fokus gerade befindet, wenn sie die Tabulatortaste verwenden. Mit :focus-visible können Sie einen Fokusstil präsentieren, wenn ein Element über die Tastatur den Fokus erhält. Gleichzeitig können Sie mit der outline: none-Regel verhindern, dass der Fokusstil angezeigt wird, wenn ein Zeigergerät mit dem Element interagiert.

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

:target

Mit der Pseudoklasse :target wird ein Element ausgewählt, dessen id mit einem URL-Fragment übereinstimmt. Angenommen, Sie haben den folgenden HTML-Code:

<article id="content">     <!-- ... --> </article> 

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

#content:target {     background: yellow; } 

Das ist nützlich, um Bereiche hervorzuheben, auf die möglicherweise speziell verlinkt wurde, z. B. die Hauptinhalte einer Website über einen Skip-Link.

Historische Bundesstaaten

:link

Die Pseudoklasse :link kann auf jedes <a>-Element angewendet werden, das einen href-Wert hat, der noch nicht besucht wurde.

:visited

Mit der Pseudoklasse :visited können Sie einen Link gestalten, der bereits vom Nutzer besucht wurde. Das ist der umgekehrte Zustand von :link. Aus Sicherheitsgründen stehen Ihnen jedoch weniger CSS-Eigenschaften zur Verfügung. Sie können nur color, background-color, border-color, outline-color und die Farbe von SVG fill und stroke formatieren.

Reihenfolge ist wichtig

Wenn Sie einen :visited-Stil definieren, kann er durch eine Link-Pseudoklasse mit mindestens gleicher Spezifität überschrieben werden. Aus diesem Grund wird empfohlen, die LVHA-Regel zum Formatieren 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 Formularelemente in den verschiedenen Zuständen ausgewählt werden, 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 mit der Pseudoklasse :disabled auf diesen Status reagieren. Die Pseudoklasse :enabled ist für den gegenüberliegenden Status verfügbar. Formularelemente sind jedoch standardmäßig auch :enabled. Daher werden Sie diese Pseudoklasse wahrscheinlich nicht so oft verwenden.

:checked und :indeterminate

Die Pseudoklasse :checked ist verfügbar, wenn ein unterstützendes Formularelement wie ein Kästchen oder ein Optionsfeld ausgewählt ist.

Der Status :checked ist ein binärer Status (wahr oder falsch). Kästchen haben jedoch einen Zwischenstatus, wenn sie weder ausgewählt noch nicht ausgewählt sind. Dies wird als :indeterminate-Status bezeichnet.

Ein Beispiel für diesen Zustand ist, wenn Sie ein Steuerelement vom Typ „Alle auswählen“ haben, mit dem alle Kästchen in einer Gruppe aktiviert werden. Wenn der Nutzer dann eines dieser Kästchen deaktiviert, repräsentiert das Stammkästchen nicht mehr „alle“ und sollte daher in einen unbestimmten Zustand versetzt werden.

Das <progress>-Element hat auch einen unbestimmten Zustand, der formatiert werden kann. Ein häufiger Anwendungsfall ist, die Linie gestreift darzustellen, um anzugeben, dass nicht bekannt ist, wie viel mehr benötigt wird.

:placeholder-shown

Wenn ein Formularfeld das Attribut placeholder hat und kein Wert festgelegt ist, kann die Pseudoklasse :placeholder-shown verwendet werden, um diesem Status Formatierungen zuzuweisen. Sobald Inhalte im Feld vorhanden sind, unabhängig davon, ob sie ein placeholder haben oder nicht, gilt dieser Status nicht mehr.

Überprüfungsstatus

Sie können mit Pseudoklassen wie :valid, :invalid und :in-range auf die Validierung von HTML-Formularen reagieren. Die Pseudoklassen :valid und :invalid sind in Kontexten wie einem E‑Mail-Feld nützlich, das ein pattern enthält, das 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 zum nächsten Feld wechseln kann.

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

In HTML-Formularen können Sie mit dem Attribut required festlegen, dass ein Feld erforderlich ist. Die Pseudoklasse :required ist für Pflichtfelder verfügbar. Felder, die nicht erforderlich sind, können mit der Pseudoklasse :optional ausgewählt werden.

Elemente nach Index, Reihenfolge und Vorkommen auswählen

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

:first-child und :last-child

Wenn Sie das erste oder letzte Element finden möchten, können Sie :first-child und :last-child verwenden. Diese Pseudoklassen geben entweder das erste oder das letzte Element in einer Gruppe von gleichgeordneten Elementen zurück.

:only-child

Sie können auch Elemente ohne Geschwister auswählen, indem Sie die Pseudoklasse :only-child verwenden.

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

Sie können :first-of-type und :last-of-type auswählen, die auf den ersten Blick dasselbe wie :first-child und :last-child zu tun scheinen. Betrachten Sie aber diesen HTML-Code:

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

Keine Elemente werden rot dargestellt, da das erste untergeordnete Element ein Absatz und kein Div 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 vom Typ innerhalb des .my-parent-Elements. Daher wird es mit dieser Regel rot dargestellt.

: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 angeben, das sich an einem bestimmten Index befindet. Die Indexierung in CSS-Selektoren beginnt bei 1.

Die Pseudoklassen :nth-last-child() und :nth-last-of-type() zählen vom Ende an, nicht vom Anfang.

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

Sie können auch komplexere Selektoren erstellen, mit denen Elemente in regelmäßigen Abständen gefunden werden. Verwenden Sie dazu die Mikrosyntax „An+B“.

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

Mit diesem Selektor wird jedes dritte Element ab dem dritten Element ausgewählt. Die 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>-Artikel. Das erste ausgewählte Element ist „3“, da 3n+3 in (3 * 0) + 3 übersetzt wird. In 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.

:nth-child() und :nth-last-child() unterstützen auch die Syntax „of S“, mit der Sie die Übereinstimmungen mit einem Selektor filtern können, ähnlich wie bei :nth-of-type(). li:nth-of-type(even) entspricht :nth-child(even of li). Mit :nth-of-type können Sie nur nach Elementtyp filtern (z. B. li oder p). Mit der Syntax „of S“ können Sie nach einem beliebigen Selektor filtern.

Wenn Sie eine Tabelle haben, können Sie jede zweite Zeile mit einer Farbe unterlegen. Mittr:nth-child(even)können Sie zwar jede zweite Zeile ausrichten, das funktioniert aber nicht, wenn Sie einige Zeilen herausfiltern. Wenn Sie die Filterung durch Anwenden des Attributs hidden implementieren, können Sie dem Selektor of :not([hidden]) hinzufügen, um die ausgeblendeten Elemente vor dem Auswählen der geraden Zeilen herauszufiltern.

tr:nth-child(even of :not([hidden])){   background: lightgrey; } 

Sie können mit dieser Art von Selektor auf diesem nth-child-Tester oder diesem Tool für Mengenselektoren experimentieren.

:only-of-type

Schließlich können Sie mit :only-of-type das einzige Element eines bestimmten Typs in einer Gruppe von gleichgeordneten Elementen 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 nützlich, völlig leere Elemente zu identifizieren. Auch dafür gibt es eine Pseudoklasse.

:empty

Wenn ein Element keine untergeordneten Elemente hat, wird die Pseudoklasse :empty darauf angewendet. Untergeordnete Elemente sind jedoch nicht nur HTML-Elemente oder Textknoten, sondern können auch Leerzeichen sein. Das kann verwirrend sein, wenn Sie das folgende HTML-Dokument debuggen und sich fragen, warum es nicht mit :empty funktioniert:

<div> </div> 

Der Grund dafür ist, dass sich zwischen dem öffnenden und dem schließenden <div> etwas Leerraum befindet. Daher funktioniert :empty nicht.

Die Pseudoklasse :empty kann nützlich sein, wenn Sie wenig Kontrolle über das HTML haben und leere Elemente wie einen WYSIWYG-Inhaltseditor ausblenden möchten. Hier hat ein Bearbeiter einen einzelnen 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 diese Informationen finden und ausblenden.

.post :empty {     display: none; } 

Mehrere Elemente suchen und ausschließen

Einige Pseudoklassen helfen Ihnen, kompakteres CSS zu schreiben.

:is()

Wenn Sie alle untergeordneten Elemente h2, li und img in einem .post-Element finden möchten, könnten Sie eine Selektorliste 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 Selektorliste, sondern auch fehlertoleranter. In den meisten Fällen funktioniert die gesamte Selektorliste nicht mehr, wenn ein Fehler oder ein nicht unterstützter Selektor in einer Selektorliste vorhanden ist. Wenn in einer :is-Pseudoklasse ein Fehler in den übergebenen Selektoren auftritt, wird der ungültige Selektor ignoriert, die gültigen Selektoren werden jedoch verwendet.

:not()

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

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

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

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

:has()

Was ist, wenn Sie Elemente basierend auf ihrem Inhalt gestalten möchten? Dazu können Sie die Pseudoklasse :has() verwenden. Sie möchten beispielsweise Stile auf Schaltflächen mit Symbolen anwenden.

 button:has(svg) {   /* ... */ } 

In der einfachsten Konfiguration, wie im vorherigen Beispiel, kann :has() als übergeordneter Selektor betrachtet werden. Sie können den passenden übergeordneten Selektor auch mit anderen Selektoren kombinieren, um andere Elemente auszurichten.

form:has(input:valid) label {   font-weight: bold; }  form:has(input:valid) label::after {   content: "✅"; } 

In diesem Beispiel wenden wir Stile auf das Label-Element und das label::after-Pseudoelement an, wenn die Formulareingabe eine valid-Pseudoklasse hat.

Die Pseudoklasse :has() kann nicht in einer anderen :has() verschachtelt werden, aber sie kann mit anderen Pseudoklassen kombiniert werden.

:is(h1, h2, h3):has(a) {    /* ... */ } 

Die Selektorliste ist sehr streng. Wenn also Selektoren in der Liste ungültig sind, werden alle Stilregeln ignoriert.

.my-element:has(img, ::before) {   /* any styles here will be discarded since pseudo elements can't be included in the :has() selector list */ } 

Wissen testen

Ihr Wissen zu Pseudoklassen testen