CSS/Tutorials/Selektoren/Pseudoklasse

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

Bei Pseudoklassen handelt es sich um einfache Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft besitzt. So lassen sich zum Beispiel Elemente auswählen, über denen sich gerade der Mauszeiger befindet oder Elemente, die das erste Kindelement eines anderen Elementes sind. CSS unterscheidet:

strukturelle Pseudoklassen[Bearbeiten]

Beachten Sie: Selektoren wie strukturelle Pseudoklassen werden nicht auf die tatsächliche Reihenfolge und Verschachtelung der Elemente in einem Dokument angewendet, sondern auf den vom Parser erzeugten Elementbaum (DOM). Dieser weicht z. B. dann vom Quelltext des Dokuments ab, wenn der HTML-Parser Fehlerkorrekturen durchführt.

Strukturelle Pseudoklassen sind dafür gedacht, Elemente aufgrund ihrer Position im DOM zu selektieren.

Im Einzelnen sind dies

  • :root, für das Wurzelelement
  • :empty, für leere Elemente

Selektoren für Kindelemente

Diese Selektoren treffen auf alle Kindelemente zu. Im Gegensatz dazu werden mit :…-of-type nur bestimmte Kindelemente selektiert. Der Unterschied ist anschaulich etwa der zwischen erstem Kind und erster Tochter.

Selektoren für Geschwisterelemente

Diese Selektoren treffen nur auf bestimmte Kindelemente zu. Im Gegensatz dazu werden mit :…-child alle Kindelemente selektiert. Der Unterschied ist anschaulich etwa der zwischen erster Tochter und erstem Kind.

dynamische Pseudoklassen[Bearbeiten]

Dynamische Pseudoklassen selektieren Elemente aufgrund einer Benutzeraktion.

Im einzelnen sind dies:

für Maus- und Tastaturinteraktionen

für Verweise

für Ziele von Verweisen

für Formularelemente[Bearbeiten]

disabled, enabled, checked[Bearbeiten]

Die Pseudoklassen :enabled, :disabled und :checked selektieren Formularelemente danach, ob sie anwählbar (enabled = freigegeben), nicht anwählbar (disabled = gesperrt) oder angewählt (checked, check = Haken) sind.

  • CSS 2.1
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera

Das Aussehen der Bedienelemente von Formularen wird wesentlich durch den verwendeten Browser und das Betriebssystem bestimmt, die Formatierungsmöglichkeiten via CSS sind eher gering. So ist es zum Beispiel nicht möglich, die Schriftart oder -farbe der Haken in Checkboxen zu verändern. Es gibt jedoch auch Formularelemente, deren Darstellung sich mit CSS weitreichender beeinflussen lässt, wie zum Beispiel Texteingabefelder.

Kennzeichnung von auswählbaren und ausgewählten Checkboxen ansehen …
input:disabled + span::after {content: " nicht auswählbar"} input:enabled + span::after {content: " auswählbar"} input:checked + span::after {content: " ausgewählt"} input:disabled { outline: 2px solid red;} input:checked { outline: 2px solid green; }
Im vorliegenden Beispiel werden die ausgewählten Checkboxen mit einer grünen Außenlinie umgeben; die gesperrten mit einer roten. Zusätzlich wird eine Erläuterung generiert. (Das Pluszeichen repräsentiert den Nachbarkombinator.)
    <form action="CSS_grundlagen_enabled_disabled_checked.html">
      <ul>
        <li><input type="checkbox"><span></span></li>
        <li><input type="checkbox" disabled><span></span></li>
        <li><input type="checkbox" checked><span></span></li>
      </ul>
    </form>
Beachten Sie: Möglicherweise wird eine zukünftige Spezifikation eine Pseudoklasse :indeterminate für Elemente, die weder enabled noch disabled sind, beinhalten.

Hinweis

Die Pseudoklasse checked ist integraler Bestandteil des Checkbox-Hack und kann damit genutzt werden, um dynamisches Verhalten rein mit CSS zu realisieren.

:valid und :invalid[Bearbeiten]

  • CSS 2.1
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera
Gültigkeit von eingegebenen Werten anzeigen ansehen …
form > * {
      float: left;
}
label {
      clear: both;
      line-height: 2em;
      margin-right: 1em;
}
label::after { 
      content:": ";}
input:valid {
      color: green;
}
input:invalid {
      background-color: #e00;
}
<form>
     <label for="input1">Bitte etwas eingeben</label>
     <input id="input1" required>
     <label for="input2">Bitte eine ganze Zahl eingeben</label>
     <input id="input2" required type="number">
     <label for="input3">Bitte eine ganze Zahl zwischen 10 und 20 eingeben</label>
     <input id="input3" required type="number" min="10" max="20">
</form>
Im vorliegenden Beispiel ändert sich die Hintergrundfarbe des Eingabefelds von rot auf transparent und die Textfarbe auf grün, sobald etwas eingegeben wurde (Beispiel 1), die Eingabe dem vereinbarten Typ (Beispiel 2) oder dem Wertebereich von 10-20 (Beispiel 3) entspricht.
Beachten Sie: Die Browser haben ggf. noch weitere visuelle Hervorhebungen, insbesondere für die Pseudoklasse invalid, definiert. Dies kann zudem davon abhängig sein, ob sich die Elemente zur Eingabe innerhalb eines absendbaren Formulars befinden oder nicht.

Siehe auch

:in-range und :out-of-range[Bearbeiten]

Die Pseudoklassen :in-range und :out-of-range selektieren Formularelemente danach, ob eine Eingabe inner- oder außerhalb der mit den Attributen min und max festgelegten Mindest- und Maximalwerten liegt. Diese Pseudoklasse gilt nur bei Elementen, bei denen eine Bereichsbegrenzung vorgenommen werden kann.

  • HTML5
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Alles im grünen Bereich? ansehen …
input {
    border: 1px solid black;
}
input:in-range {
    background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
    background-color: rgba(255, 0, 0, 0.25);
    border: 2px solid red;
}
input:in-range + ::after {
    content:' ✔';
}
input:out-of-range + ::after {
    content:' außerhalb des Bereichs!';
}
<form action="" id="form1">
  <label for="alter">Ihr Alter ist: </label>
  <input id="alter" name="altersangabe" type="number" placeholder="6 bis 99" min="6" max="99">
  <span></span>
</form>
Im vorliegenden Beispiel ändert sich die Hintergrundfarbe des Eingabefelds von grün auf rot, sobald etwas außerhalb des Gültigkeitsbereichs eingegeben wurde. Sobald der eingegebene Wert wieder im Gültigkeitsbereich der Bereichsbegrenzung liegt, wird der Hintergrund wieder grün.

Siehe auch

funktionale Pseudoklassen[Bearbeiten]

:is()[Bearbeiten]

Die matches-any-Pseudoklasse :is() ist eine funktionale Pseudoklasse. Sie erhält eine Selektor-Liste als ihr Argument. Mit ihrer Hilfe können Selektoren gruppiert werden. Sie war ursprünglich als matches() (und any() bei Firefox) implementiert und wurde umbenannt.

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera

Details: caniuse.com

Der Titel dieses Artikels ist mehrdeutig. Für die gleichnamige JavaScript-Methode siehe element.matches().



Hinweis

Nicht jeder CSS-Parser akzeptiert alle Typen von Selektoren innerhalb der Selektoren-Liste.[1] Bei Verwendung von :is() wird empfohlen sich auf verbundene Selektoren zu beschränken und keine Kombinatoren bzw. komplexe Selektoren zu verwenden.
Beachten Sie: :is() darf nicht in sich selbst verschachtelt werden; etwas wie is(:is(...)) ist somit nicht erlaubt. Ebenfalls nicht erlaubt ist die Verwendung der Pseudoklasse :not() innerhalb von :is(). Auch ist die Verwendung von Pseudo-Elementen generell nicht erlaubt.


Beispiel
:is(:link, :visited) { color: red }
Das Beispiel setzt die Schriftfarbe aller Verweise auf rot (Hinweis: Das Beispiel ist äquivalent zu any-link bzw. [href]).

Eine Deklaration des Standard-Namespaces außerhalb von :matches() beeinflusst nicht die impliziten Universal-Selektoren innerhalb, wie folgendes Beispiel zeigt:

Universalselektor innerhalb und außerhalb von :matches()
*:matches(:hover, :focus) { color: red }
*:matches(*:hover, *:focus) { color: red }
Im ersten Beispiel wird jedem überfahrenen oder fokussierten Element die Schriftfarbe rot zugewiesen, egal in welchem Namespace es sich befindet. Im zweiten Beispiel betrifft dies ausschließlich die Elemente im Standard-Namespace, da der Universalselektor innerhalb von :matches explizit angegeben wurde.


:not()[Bearbeiten]

Die Pseudoklasse :not() erwartet als Argument einen einfachen Selektor, mit Ausnahme der Pseudoklasse :not() selbst. Sie spricht dann alle diejenigen Elemente an, auf die das Argument nicht zutrifft.

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Pseudoklasse :not()</title> <style> a:not([href*="example."]) { background: red; } </style> </head> <body> <h1>Die Pseudoklasse :not()</h1> <ul> <li><a href="http://example.com/">Beispiellink</a></li> <li><a href="http://example.com/example.pdf">ein PDF-Dokument</a></li> <li><a href="http://wiki.selfhtml.org/">Das selfhtml wiki</a></li> <li><a href="HTTPS://EXAMPLE.ORG/WIKI/EXAMPLE.PDF/">Groß- und Kleinschreibung beachten!</a></li> </ul> </body> </html>
In diesem Beispiel werden alle Link-Elemente, deren href-Attribut nicht die Zeichenkette „example.“ enthält mit einem roten Hintergrund versehen.
Beispiel
#inhalt :not(p) { color: red }
In diesem Beispiel würden alle Kindelemente des Elementes mit der ID „inhalt“, die keine Absätze sind, eine rote Schriftfarbe erhalten. Dies ist etwa sinnvoll, wenn dieses Element nur Überschriften, Absätze und Bilder enthält.

Änderungen in CSS Level 4[Bearbeiten]

In Level 4 darf das Argument der Pseudoklasse auch ein zusammengesetzter Selektor sein.

Weblinks[Bearbeiten]

Fußnoten[Bearbeiten]

  1. SelfHTML Wiki: Fast vs. Complete Selector Profiles (deutsch)