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-within
Welche der folgenden Pseudoklassen sind <form>
?
:enabled
:fresh
:indeterminate
:checked
:in-range
:loading
:valid