The CSS Podcast – 015: Pseudoklassen
Angenommen, Sie haben ein Anmeldeformular für E-Mails,
und das E-Mail-Formularfeld soll rot umrandet sein, wenn es eine ungültige E-Mail-Adresse enthält.
Wie gehen Sie vor?
Sie können die CSS-Pseudoklasse :invalid
verwenden.
eine von vielen
Pseudoklassen, 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. Diese werden in diesem Modul näher erläutert.
Im Gegensatz zu Pseudoelementen Mehr dazu im vorherigen Modul Pseudo-Klassen werden an bestimmte Zustände gebunden, in denen sich ein Element befinden könnte. anstatt in der Regel nur Teile dieses Elements zu gestalten.
Interaktive Zustände
Die folgenden Pseudoklassen gelten aufgrund einer Nutzerinteraktion mit Ihrer Seite.
:hover
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Wenn Nutzende ein Zeigegerät wie eine Maus oder ein Touchpad haben,
und platzieren es über einem Element
können Sie diesen Zustand mit
:hover
, um Stile anzuwenden.
Dies ist ein nützlicher Hinweis darauf, dass mit einem Element interagiert werden kann.
:active
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Dieser Status wird ausgelöst, wenn ein Element aktiv interagiert wird: wie z. B. ein Klick, bevor er freigegeben wird. Wenn Sie ein Zeigegerät wie eine Maus verwenden, wenn der Klick beginnt und noch nicht freigegeben wurde.
:focus
, :focus-within
und :focus-visible
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Wenn ein Element fokussiert werden kann, z. B. ein <button>
,
können Sie mit der Funktion
:focus
.
Sie können auch reagieren, wenn ein untergeordnetes Element
:focus-within
Fokussierbare Elemente wie Schaltflächen blendet einen Fokusring ein, wenn sie im Fokus sind – auch wenn darauf geklickt wird. In diesem Fall wendet ein Entwickler das folgende CSS an:
button:focus {
outline: none;
}
Dadurch wird der standardmäßige Fokusring des Browsers entfernt, wenn ein Element den Fokus erhält.
Dies stellt ein Problem mit der Barrierefreiheit für Nutzende dar, die auf einer Webseite mit einer Tastatur navigieren.
Wenn kein Fokusstil vorhanden ist,
können sie nicht mehr verfolgen, wo der Fokus gerade liegt, wenn sie die Tabulatortaste verwenden.
Mit :focus-visible
können Sie einen Fokusstil präsentieren,
wenn ein Element über die Tastatur fokussiert wird.
und die outline: none
-Regel verhindert, dass ein Zeiger mit ihm interagiert.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Die :target
Mit der Pseudoklasse wird ein Element ausgewählt, dessen id
mit einem URL-Fragment übereinstimmt.
Angenommen, Sie haben 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, die möglicherweise speziell verknüpft wurden, etwa den Hauptinhalt einer Website, über einen Link zum Überspringen.
Historische Bundesstaaten
:link
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Die :link
Eine Pseudoklasse kann auf jedes <a>
-Element mit einem href
-Wert angewendet werden, der noch nicht besucht wurde.
:visited
Sie können einen Link, der bereits vom Nutzer besucht wurde, mithilfe der Methode
:visited
-Pseudoklasse.
Dies ist der umgekehrte Zustand zu :link
, aber Sie haben weniger CSS-Eigenschaften, die Sie für
Sicherheitsgründen.
Du kannst nur color
, background-color
,
border-color
, outline-color
und die SVG-Farbe fill
und stroke
.
Rechtsangelegenheiten anordnen
Wenn Sie einen :visited
-Stil definieren,
kann sie durch eine Link-Pseudoklasse mit mindestens gleicher Spezifität überschrieben werden.
Aus diesem Grund
empfiehlt es sich, die LVHA-Regel für das 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 Sie Formularelemente auswählen, in den verschiedenen Stadien angezeigt, in denen sich diese Elemente während der Interaktion mit ihnen befinden könnten.
:disabled
und :enabled
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Wenn ein Formularelement
z. B. wenn <button>
vom Browser deaktiviert wurde,
können Sie diesen Zustand mit dem
:disabled
.
Die :enabled
ist eine Pseudoklasse für
den anderen Zustand verfügbar.
Obwohl Formularelemente standardmäßig auch :enabled
sind,
Daher werden Sie diese Pseudoklasse möglicherweise nicht erreichen.
:checked
und :indeterminate
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Die :checked
Die Pseudoklasse ist verfügbar,
wenn ein unterstützendes Formularelement,
z. B. wenn ein Kästchen
oder ein Optionsfeld aktiviert ist.
Der :checked
-Status ist ein Binärzustand(wahr oder falsch),
aber Kontrollkästchen haben einen Status in der Mitte, wenn sie weder aktiviert noch deaktiviert sind.
Dies wird als
:indeterminate
-Status.
Ein Beispiel für diesen Status ist, wenn Sie die Option „Alle auswählen“ das alle Kästchen in einer Gruppe markiert. Wenn der Nutzer eines dieser Kästchen dann deaktivieren wollte, würde das Root-Kästchen nicht mehr „alle“ enthalten. zu prüfen, in einen unbestimmten Zustand versetzt werden.
Das <progress>
-Element hat auch einen unbestimmten Zustand, für den ein Stil festgelegt werden kann.
Ein häufiger Anwendungsfall besteht darin, ihm ein gestreiftes Aussehen zu verleihen, um anzuzeigen, wie viel mehr benötigt wird.
:placeholder-shown
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Wenn ein Formularfeld ein placeholder
-Attribut und keinen Wert hat,
:placeholder-shown
pseudo-class können verwendet werden, um Stile an diesen Zustand anzuhängen.
Sobald es entsprechende Inhalte gibt,
unabhängig davon, ob sie placeholder
hat oder nicht,
gilt dieser Bundesstaat nicht mehr.
Validierungsstatus
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Sie können auf die Validierung von HTML-Formularen mit Pseudoklassen wie
:valid
,
:invalid
und
:in-range
Die Pseudoklassen :valid
und :invalid
sind für Kontexte nützlich
z. B. 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.
und ihnen zu vermitteln, dass sie sicher ins nächste Feld übergehen können.
Die Pseudoklasse :in-range
ist verfügbar, wenn eine Eingabe die Variablen min
und max
enthält.
wie eine numerische Eingabe und der Wert liegt innerhalb dieser Grenzen.
Bei HTML-Formularen
können Sie mit dem Attribut required
festlegen, dass ein Feld erforderlich ist.
Die :required
ist die Pseudoklasse für Pflichtfelder verfügbar.
Felder, die nicht erforderlich sind, können mit der
:optional
-Pseudoklasse.
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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Wenn Sie das erste oder letzte Element finden möchten,
können Sie
:first-child
und
:last-child
Diese Pseudoklassen geben entweder das erste oder das letzte Element in einer Gruppe gleichgeordneter Elemente zurück.
:only-child
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Sie können auch Elemente auswählen,
die keine gleichgeordneten Elemente haben,
mit dem
:only-child
-Pseudoklasse.
:first-of-type
und :last-of-type
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Sie können die
:first-of-type
und
:last-of-type
, wobei zuerst
Es sieht so aus, als ob sie dasselbe wie :first-child
und :last-child
tun, aber wir betrachten diesen HTML-Code:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
Dieses CSS:
.my-parent div:first-child {
color: red;
}
Es werden keine Elemente rot gefärbt, da das erste untergeordnete Element ein Absatz und kein div-Element ist.
Die Pseudoklasse :first-of-type
ist in diesem Kontext hilfreich.
.my-parent div:first-of-type {
color: red;
}
Auch wenn das erste <div>
das zweite untergeordnete Element ist,
ist es immer noch der erste Typ innerhalb des .my-parent
-Elements,
Bei dieser Regel wird sie rot gefärbt.
:nth-child
und :nth-of-type
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Sie sind nicht auf das erste und das letzte untergeordnete Element und auch nicht auf die Typen beschränkt.
Die :nth-child
und
:nth-of-type
Mit Pseudoklassen können Sie ein Element angeben, das sich bei einem bestimmten Index befindet.
Die Indexierung in CSS-Selektoren beginnt bei 1.
Sie können in diese Pseudoklassen auch mehr als einen Index ü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. mit der An+B-Mikrosyntax.
li:nth-child(3n+3) {
background: yellow;
}
Mit dieser Auswahl wird jedes dritte Element ausgewählt,
ab Punkt 3.
Die n
in diesem Ausdruck ist der Index,
Die Zahl beginnt bei null. Die 3 (3n
) ist der Wert,
mit dem Sie diesen Index multiplizieren.
Angenommen, Sie haben 7 Artikel von <li>
.
Das erste Element, das ausgewählt wird, ist 3, da 3n+3
mit (3 * 0) + 3
übersetzt wird.
In der nächsten Iteration würde 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 mit diesem Selektor experimentieren n-th-child tester oder diese Mengenauswahl-Tool
:only-of-type
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Schließlich können Sie das einzige Element eines bestimmten Typs in einer Gruppe von Geschwistern finden,
:only-of-type
Dies ist nützlich, wenn Sie Listen
mit nur einem Element auswählen möchten.
oder wenn Sie das einzige fett formatierte Element in einem Absatz finden möchten.
Leere Elemente finden
Es kann manchmal nützlich sein, vollständig leere Elemente zu identifizieren, Es gibt auch eine Pseudoklasse.
:empty
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Hat ein Element keine untergeordneten Elemente,
Für sie gilt die Pseudoklasse :empty
.
Untergeordnete Elemente sind jedoch nicht nur HTML-Elemente oder Textknoten: Sie können auch Leerzeichen,
Dies kann verwirrend sein, wenn Sie Fehler im folgenden HTML-Code beheben und sich fragen, warum er nicht mit :empty
funktioniert:
<div>
</div>
Das liegt daran, dass zwischen der öffnenden und der schließenden <div>
-Datei ein Leerzeichen vorhanden ist.
leer ist, funktioniert nicht.
Die Pseudoklasse :empty
kann nützlich sein, wenn Sie wenig Kontrolle über den HTML-Code haben und leere Elemente ausblenden möchten.
wie einem WYSIWYG-Content-Editor.
Hier hat ein Redakteur einen vereinzelten, 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 das finden und ausblenden.
.post :empty {
display: none;
}
Mehrere Elemente suchen und ausschließen
Mit einigen Pseudoklassen können Sie kompakteren CSS-Code schreiben.
:is()
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Wenn Sie alle untergeordneten Elemente h2
, li
und img
in einem .post
-Element finden möchten, gehen Sie so vor:
könnten Sie denken, eine Selektorliste wie diese zu schreiben:
.post h2,
.post li,
.post img {
…
}
Mit der :is()
Pseudoklasse haben, 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
Wenn eine Auswahlliste einen Fehler oder
einen nicht unterstützten Selektor enthält,
funktioniert die gesamte Auswahlliste nicht mehr.
Wenn in den übergebenen Selektoren in einer Pseudoklasse :is
ein Fehler auftritt,
wird der ungültige Selector ignoriert, es werden jedoch gültige verwendet.
:not()
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Sie können auch Elemente ausschließen,
:not()
-Pseudoklasse.
Sie können damit beispielsweise alle Links gestalten, die kein class
-Attribut haben.
a:not([class]) {
color: blue;
}
Mit der Pseudoklasse :not
können Sie die Barrierefreiheit verbessern.
Beispiel: Ein <img>
muss einen alt
haben, auch wenn er leer ist.
Sie könnten also eine CSS-Regel schreiben, die ungültigen Bildern eine dicke rote Umrandung hinzufügt:
img:not([alt]) {
outline: 10px red;
}
Wissen testen
Testen Sie Ihr Wissen über Pseudoklassen
Pseudoklassen verhalten sich so, als ob eine Klasse dynamisch auf ein Element angewendet wurde, während Pseudoelemente auf ein Element selbst angewendet werden.
Welche der folgenden Optionen ist eine funktionale Pseudoklasse?
:target
:not()
:is()
:empty
Welche der folgenden Pseudoklassen sind auf eine Nutzerinteraktion zurückzuführen?
:focus-within
:target
:press
:hover
:squeeze
Welche der folgenden sind <form>
-Pseudoklassen?
:loading
:checked
:valid
:in-range
:fresh
:enabled
:indeterminate