Pseudoklassen

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 2. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1.3. <ph type="x-smartling-placeholder">

Quelle

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

Unterstützte Browser

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1 <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1 <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 47. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 51. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 10. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 4. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari: 3.1 <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 2. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1.5 <ph type="x-smartling-placeholder">
  • Safari: 3.1 <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3.5 <ph type="x-smartling-placeholder">
  • Safari: 3.1 <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3.5 <ph type="x-smartling-placeholder">
  • Safari: 3.1 <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3.5 <ph type="x-smartling-placeholder">
  • Safari: 3.1 <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1 <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 88 <ph type="x-smartling-placeholder">
  • Edge: 88. <ph type="x-smartling-placeholder">
  • Firefox: 78 <ph type="x-smartling-placeholder">
  • Safari: 14. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1 <ph type="x-smartling-placeholder">

Quelle

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.

Richtig
Achten Sie auf die Verwendung eines einfachen oder doppelten : als Unterscheidungsmerkmal im Selektor
Falsch
Pseudoelemente sind Teile, Pseudoklassen für Zustand.

Welche der folgenden Optionen ist eine funktionale Pseudoklasse?

:is()
🎉
:target
Nach funktionalen Pseudoklassen steht (), um darauf hinzuweisen, dass sie Parameter akzeptieren.
:empty
Nach funktionalen Pseudoklassen steht (), um darauf hinzuweisen, dass sie Parameter akzeptieren.
:not()
🎉

Welche der folgenden Pseudoklassen sind auf eine Nutzerinteraktion zurückzuführen?

:hover
🎉
:press
Versuch es noch einmal.
:squeeze
Versuch es noch einmal.
:target
🎉
:focus-within
🎉

Welche der folgenden sind <form>-Pseudoklassen?

:enabled
🎉
:fresh
Versuch es noch einmal.
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
Versuch es noch einmal.
:valid
🎉