The CSS Podcast – 015: Pseudo-classes
Angenommen, Sie haben ein E-Mail-Anmeldeformular und möchten, dass das E-Mail-Formularfeld eine rote Umrandung hat, wenn es eine ungültige E-Mail-Adresse enthält.
Wie machen Sie das?
Sie können die CSS-Pseudoklasse :invalid verwenden, die eine von vielen Pseudoklassen ist, die vom Browser bereitgestellt werden.
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 selectors behandelt, den Sie in diesem Modul noch genauer durchgehen.
Im Gegensatz zu Pseudoelementen, über die Sie im vorherigen Modul mehr erfahren haben, werden Pseudoklassen an bestimmte Zustände gebunden, in denen sich ein Element befinden kann, anstatt allgemeine Teile dieses Elements zu formatieren.
Interaktive Zustände
Die folgenden Pseudoklassen gelten aufgrund einer Interaktion eines Nutzers mit Ihrer Seite.
:hover
Wenn ein Nutzer ein Zeigegerät wie eine Maus oder ein Touchpad hat und es über einem Element platziert, können Sie es mit :hover in diesen Zustand einhängen, um Stile anzuwenden.
Dies ist ein nützlicher Hinweis darauf, dass mit einem Element interagiert werden kann.
:active
Dieser Status wird ausgelöst, wenn aktiv mit einem Element interagiert wird, z. B. bei einem Klick, bevor der Klick freigegeben wird. Wenn ein Zeigegerät wie eine Maus verwendet wird, beginnt der Klick in diesem Zustand und wurde noch nicht freigegeben.
:focus, :focus-within und :focus-visible
Wenn ein Element fokussiert werden kann (z. B. ein <button>), können Sie mit der Pseudoklasse :focus auf diesen Zustand reagieren.
Mit :focus-within können Sie auch reagieren, wenn ein untergeordnetes Element Ihres Elements im Fokus ist.
Fokussierbare Elemente wie Schaltflächen zeigen einen Fokusring an, wenn sie im Fokus sind – auch wenn sie angeklickt werden. In diesem Fall wendet ein Entwickler den folgenden CSS-Code an:
button:focus {
outline: none;
}
Mit diesem CSS-Code wird der Standard-Browser-Fokusring entfernt, wenn ein Element fokussiert wird. Dies stellt für Nutzer, die mit einer Tastatur auf einer Webseite navigieren, ein Problem mit der Barrierefreiheit dar.
Wenn kein Fokusstil vorhanden ist, können sie bei Verwendung der Tabulatortaste nicht verfolgen, wo der Fokus gerade liegt.
Mit :focus-visible können Sie einen Fokusstil einblenden, wenn ein Element über die Tastatur fokussiert wird. Außerdem können Sie die Regel outline: none verwenden, um zu verhindern, dass ein Zeigergerät mit ihm interagiert.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
Die Pseudoklasse :target wählt ein Element aus, dessen id mit einem URL-Fragment übereinstimmt.
Angenommen, Sie verwenden den folgenden HTML-Code:
<article id="content">
…
</article>
Sie können diesem Element Designs hinzufügen, wenn die URL #content enthält.
#content:target {
background: yellow;
}
Dies ist nützlich, um Bereiche hervorzuheben, mit denen möglicherweise speziell verknüpft wurde, z. B. der Hauptinhalt einer Website, über einen Link zum Überspringen.
Historische Bundesstaaten
:link
Die Pseudoklasse :link kann auf jedes <a>-Element mit einem href-Wert angewendet werden, der noch nicht aufgerufen wurde.
:visited
Mit der Pseudoklasse :visited können Sie einen Link gestalten, der bereits vom Nutzer besucht wurde.
Dies ist das Gegenteil von :link, aber Sie haben aus Sicherheitsgründen weniger CSS-Attribute.
Sie können nur den Stil color, background-color, border-color, outline-color und die SVG-Farbe fill und stroke gestalten.
Rechtsangelegenheiten anordnen
Wenn Sie einen :visited-Stil definieren, kann er durch eine Pseudoklasse von Links überschrieben werden, die mindestens genauso spezifisch ist.
Aus diesem Grund empfiehlt es sich, die LVHA-Regel zum Gestalten von Links mit Pseudoklassen in einer bestimmten Reihenfolge zu verwenden: :link, :visited, :hover, :active.
a:link {}
a:visited {}
a:hover {}
a:active {}
Formularstatus
Die folgenden Pseudoklassen können 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 <button> vom Browser deaktiviert wird, können Sie mit der Pseudoklasse :disabled an diesen Zustand gebunden werden.
Die Pseudoklasse :enabled ist für den entgegengesetzten Zustand verfügbar, obwohl Formularelemente standardmäßig auch :enabled sind, sodass Sie diese Pseudoklasse möglicherweise nicht erreichen.
:checked und :indeterminate
Die Pseudoklasse :checked ist verfügbar, wenn ein unterstützendes Formularelement, z. B. ein Kästchen oder ein Optionsfeld, aktiviert ist.
Der Status :checked ist ein binärer Status(wahr oder falsch). Kästchen haben jedoch einen Zwischenstatus, wenn sie weder aktiviert noch deaktiviert sind.
Dies wird als :indeterminate-Zustand bezeichnet.
Ein Beispiel für einen solchen Status ist ein Steuerelement „Alle auswählen“, das alle Kästchen in einer Gruppe anklickt. Wenn der Nutzer dann eines dieser Kontrollkästchen deaktivieren würde, würde das Stammkästchen nicht mehr als "alle" angezeigt werden, die aktiviert sind, und sollte daher in einen unbestimmten Zustand versetzt werden.
Das <progress>-Element hat auch einen unbestimmten Zustand, der angepasst werden kann.
Ein häufiger Anwendungsfall ist eine gestreifte Darstellung, um anzuzeigen, dass nicht bekannt ist, wie viel mehr benötigt wird.
:placeholder-shown
Wenn ein Formularfeld ein placeholder-Attribut und keinen Wert hat, können mit der Pseudoklasse :placeholder-shown Stile an diesen Status angehängt werden.
Sobald das Feld Inhalte enthält, unabhängig davon, ob es placeholder enthält oder nicht, gilt dieser Status nicht mehr.
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 sie ein gültiges Feld ist.
Dieser gültige Wertstatus kann dem Nutzer angezeigt werden, um ihm zu verdeutlichen, dass er sicher zum nächsten Feld wechseln kann.
Die Pseudoklasse :in-range ist verfügbar, wenn eine Eingabe min und max wie eine numerische Eingabe hat und der Wert innerhalb dieser Grenzen liegt.
Bei HTML-Formularen können Sie mit dem Attribut required feststellen, dass ein Feld erforderlich ist.
Die Pseudoklasse :required ist für Pflichtfelder verfügbar.
Nicht erforderliche Felder können mit der Pseudoklasse :optional ausgewählt werden.
Elemente nach Index, Reihenfolge und Vorkommen auswählen
Es gibt eine Gruppe von Pseudoklassen, die Elemente basierend auf ihrer Position im Dokument auswählen.
: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 gleichgeordneter Elemente zurück.
:only-child
Mit der Pseudoklasse :only-child können Sie auch Elemente auswählen, die keine gleichgeordneten Elemente 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 so aussehen wie :first-child und :last-child. Betrachten Sie jedoch 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;
}
Es würden keine Elemente rot dargestellt, da das erste untergeordnete Element ein Absatz und kein div-Element ist.
Die Pseudoklasse :first-of-type ist in diesem Kontext nützlich.
.my-parent div:first-of-type {
color: red;
}
Obwohl das erste <div> das zweite untergeordnete Element ist, ist es immer noch das erste Element des Typs 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 Kinder und Typen beschränkt.
Mit den Pseudoklassen :nth-child und :nth-of-type können Sie ein Element angeben, das sich in einem bestimmten Index befindet.
Die Indexierung in CSS-Selektoren beginnt bei 1.
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, die Elemente in regelmäßigen Abständen finden, indem Sie die An+B-Mikrosyntax verwenden.
li:nth-child(3n+3) {
background: yellow;
}
Damit wird jedes dritte Element
ab Element 3 ausgewählt.
Die n in diesem Ausdruck ist der Index, der bei null beginnt. Die 3 (3n) ist der Wert, mit dem Sie diesen Index multiplizieren.
Angenommen, Sie haben 7 Elemente von <li>.
Das erste ausgewählte Element ist 3, da „3n+3“ als „(3 * 0) + 3“ übersetzt wird.
Der nächste Durchlauf würde Element 6 auswählen, 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 mit dieser Art von Selector auf diesem nth-Child-Tester oder mit diesem Tool zur Mengenauswahl experimentieren.
:only-of-type
Außerdem können Sie mit :only-of-type das einzige Element eines bestimmten Typs in einer Gruppe von gleichgeordneten Elementen finden.
Dies ist nützlich, wenn Sie Listen mit nur einem Element auswählen oder das einzige fett gedruckte Element in einem Absatz finden möchten.
Leere Elemente finden
Manchmal kann es nützlich sein, vollständig leere Elemente zu identifizieren. Dafür gibt es auch eine Pseudoklasse.
:empty
Wenn ein Element keine untergeordneten Elemente hat, wird die Pseudoklasse :empty für sie angewendet.
Untergeordnete Elemente sind nicht nur HTML-Elemente oder Textknoten, sondern können auch Leerzeichen sein, was verwirrend sein kann, wenn Sie den folgenden HTML-Code debuggen und sich fragen, warum er mit :empty nicht funktioniert:
<div>
</div>
Der Grund dafür ist, dass sich zwischen dem öffnenden und dem schließenden <div> Leerzeichen befindet. Ein leeres Feld funktioniert also nicht.
Die Pseudoklasse :empty kann nützlich sein, wenn Sie wenig Kontrolle über den HTML-Code haben und leere Elemente wie einen WYSIWYG-Inhaltseditor ausblenden möchten.
Hier hat ein Redakteur einen vereinzelten, leeren Absatz eingefügt.
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
Mit :empty kannst du dies suchen und ausblenden.
.post :empty {
display: none;
}
Mehrere Elemente suchen und ausschließen
Mit einigen Pseudoklassen können Sie kompakterer CSS-Code schreiben.
:is()
Wenn Sie alle untergeordneten Elemente vom Typ h2, li und img in einem Element .post finden möchten, können 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 nachsichtiger.
Wenn eine Selektorliste einen Fehler oder einen nicht unterstützten Selektor enthält, funktioniert die gesamte Selektorliste in den meisten Fällen nicht mehr.
Wenn die übergebenen Selektoren in einer Pseudoklasse :is einen Fehler enthalten, wird der ungültige Selektor ignoriert, aber die gültigen verwendet.
:not()
Sie können Elemente auch mit der Pseudoklasse :not() ausschließen.
Beispielsweise können Sie damit alle Links gestalten, die kein class-Attribut haben.
a:not([class]) {
color: blue;
}
Eine Pseudoklasse :not kann Ihnen auch dabei helfen, die Barrierefreiheit zu verbessern.
Beispielsweise muss ein <img> einen alt enthalten, auch wenn es sich um einen leeren Wert handelt. Sie könnten also eine CSS-Regel schreiben, die ungültigen Bildern einen dicken roten Rahmen hinzufügt:
img:not([alt]) {
outline: 10px red;
}
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Pseudokurse
Pseudoklassen verhalten sich so, als ob eine Klasse dynamisch auf ein Element angewendet wurde, während Pseudoelemente auf das Element selbst angewendet werden.
: als wichtiges Unterscheidungszeichen in der Auswahl.Welche der folgenden sind eine funktionale Pseudoklasse?
:is():target(), um anzugeben, dass sie Parameter akzeptieren.:empty(), um anzugeben, dass sie Parameter akzeptieren.:not()Welche der folgenden Pseudoklassen sind auf eine Nutzerinteraktion zurückzuführen?
:hover:press:squeeze:target:focus-withinWelche der folgenden Pseudoklassen sind <form>?
:enabled:fresh:indeterminate:checked:in-range:loading:valid