CSS-Pseudo-Klasse-Referenzhandbuch

CSS Pseudo-Klassen

Pseudo-Klassen werden verwendet, um besondere Zustände von Elementen zu definieren.

Zum Beispiel kann es verwendet werden:

  • Stellen Sie Stile ein, wenn der Benutzer den Cursor auf das Element bewegt.
  • Stellen Sie unterschiedliche Stile für besuchte und nicht besuchte Links ein.
  • Stellen Sie Stile ein, wenn ein Element den Fokus erhält.
  • Stellen Sie Stile für gültige/ungültige/pflichtige/optionalen Formularelemente ein.

Die folgende Tabelle zeigt die verschiedenen Pseudo-Klassen in CSS:

Pseudo-Klasse Beispiel Beispielbeschreibung
:active a:active Wählen Sie aktive Links.
:any-link a:anylink Wählen Sie alle <a> oder <area>-Elemente mit der href-Eigenschaft.
:auto-fill input:autofill Wählen Sie alle <input>-Elemente aus, die automatisch von dem Browser gefüllt werden.
:checked option:checked Passen Sie alle ausgewählten <input> oder <option>-Elemente überein.
:default input:default Wählen Sie die Standardformularelemente aus einer Gruppe relevanter Elemente.
:defined :defined Wählen Sie alle definierten Elemente (Standard- oder benutzerdefinierte Elemente).
:dir() :dir(rtl) Wählen Sie Elemente mit einer angegebenen Textdirection.
:disabled option:disabled Wählen Sie alle deaktivierten Elemente, die oft in Formularelementen verwendet werden.
:empty div:empty Wählen Sie alle Elemente ohne Unterelemente (einschließlich Textknoten).
:enabled input:enabled Wählen Sie alle aktiven Elemente, oft verwendet für Formularelemente.
:first @page :first Stellt die erste Seite des Druckdokuments dar (zusammen mit der @page-Regel).
:first-child p:first-child Wählen Sie das Element, das als erstes Kind des Elternelements ist (in einer Gruppe von Brüdern).
:first-of-type li:first-of-type Wählen Sie das erste spezifische Element in einer Gruppe von Brüdern.
:focus select:focus Wählen Sie das fokussierte Element, oft verwendet für Formularelemente.
:focus-visible button:focus-visible Wählen Sie das fokussierte Element (wird nur für Fokus-Stile durch Tastatur und nicht durch Maus angewendet).
:focus-within form:focus-within Passt auf das Element oder dessen beliebige Nachkommen zu, die den Fokus erhalten haben.
:fullscreen :fullscreen Wählen Sie das Element, das im Vollbildmodus ist.
:has() h2:has(+p) Wählen Sie das <h2>-Element, das unmittelbar nach dem <p>-Element folgt, und wenden Sie das Stil auf <h2> an.
:hover a:hover Wählen Sie das mausüberlagerte Element.
:in-range input:in-range Wählen Sie das <input>-Element mit einem Wert im angegebenen Bereich.
:indeterminate input:indeterminate Wählen Sie Formularelemente im unbestimmten Zustand.
:invalid input:invalid Wählen Sie ungültige Formularelemente.
:is() :is(ul, ol) Wählen Sie alle <ul> und <ol>-Elemente aus.
:lang() p:lang(it) Wählen Sie das <p>-Element mit dem Attribut lang="it" (Italienisch).
:last-child li:last-child Wählen Sie das <li>-Element als letztes Kind des Elternelements.
:last-of-type p:last-of-type Wählen Sie das <p>-Element als letztes Element des Elternelements.
:left @page :left Stellt alle linken Seiten des Druckdokuments dar (zusammen mit der @page-Regel).
:link a:link Wählen Sie alle nicht besuchten Links.
:modal :modal Wählen Sie alle Elemente im Modus der Modalauswahl.
:not() :not(p) Wählen Sie alle Elemente aus, die nicht das <p>-Element sind.
:nth-child() p:nth-child(2) Wählen Sie das <p>-Element als zweiten Nachkommen des Elternelements.
:nth-last-child() p:nth-last-child(2) Wählen Sie das <p>-Element aus, das als das zweite letztens von seinen Kindern ist.
:nth-last-of-type() p:nth-last-of-type(2) Wählen Sie das <p>-Element aus, das als das zweite letztens von seinen Elternelementen ist.
:nth-of-type() p:nth-of-type(2) Wählen Sie das <p>-Element aus, das als das zweite <p>-Element in seinem Elternelement ist.
:only-child p:only-child Wählen Sie das <p>-Element aus, das als einziger Kind seines Elternelements ist.
:only-of-type p:only-of-type Wählen Sie das <p>-Element aus, das als das einzige <p>-Element in seinem Elternelement ist.
:optional textarea:optional Wählen Sie <input>, <select> oder <textarea>-Elemente ohne das Attribut required aus.
:out-of-range input:out-of-range Wählen Sie <input>-Elemente aus, deren Wert den angegebenen Bereich übersteigt.
:placeholder-shown input:placeholder-shown Wählen Sie die <input> oder <textarea>-Elemente aus, die derzeit den Platzhaltertext anzeigen.
:popover-open :popover-open Wählen Sie Elemente, die im angezeigten Pop-up-Modus sind.
:read-only input:read-only Wählen Sie Eingabeelemente mit dem Attribut readonly aus.
:read-write input:read-write Wählen Sie editierbare Eingabeelemente aus.
:required input:required Wählen Sie Eingabeelemente mit dem Attribut required aus.
:right @page :right Stellt alle rechten Seiten des Dokuments zur Druckausgabe dar (zusammen mit der @page Regel).
:root :root Wählen Sie das Wurzelelement des Dokuments aus.
:scope :scope Wählen Sie das Element als Referenzpunkt oder Bereich für den Selector.
:state() :state() Wählen Sie eine benutzerdefinierte Elemente mit einer angegebenen benutzerdefinierten Zustands.
:target :target Wählen Sie das derzeit aktive Ziellement aus.
:user-invalid :user-invalid Wählen Sie Formularelemente mit ungültigen Werten (nach der Interaktion des Benutzers mit ihnen).
:user-valid :user-valid Wählen Sie Formularelemente mit gültigen Werten (nach der Interaktion des Benutzers mit ihnen).
:valid input:valid Wählen Sie alle Eingabeelemente mit gültigen Werten aus.
:visited a:visited Wählen Sie alle besuchten Links aus.
:where() :where(ol, ul) Wählen Sie alle <ul> und <ol>-Elemente aus.