CSS/Tutorials/Selektoren/Pseudoklasse
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:
Inhaltsverzeichnis
strukturelle Pseudoklassen[Bearbeiten]
Strukturelle Pseudoklassen sind dafür gedacht, Elemente aufgrund ihrer Position im DOM zu selektieren.
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 Formularelemente
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.
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.
<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>
Hinweis
checked ist integraler Bestandteil des Checkbox-Hack und kann damit genutzt werden, um dynamisches Verhalten rein mit CSS zu realisieren.:valid und :invalid[Bearbeiten]
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>
Siehe auch
- HTML/Formulare/Eingabefelder und Eingabebereiche/Input, dort insbesondere required und pattern
- HTML/Tutorials/Formulare/browsereigene Validierung mit HTML5
- JavaScript/Tutorials/Formulareingaben mit JavaScript validieren
: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.
Details: caniuse.com
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>
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.
Details: caniuse.com
Der Titel dieses Artikels ist mehrdeutig. Für die gleichnamige JavaScript-Methode siehe element.matches().
Hinweis
:is(:link, :visited) { color: red }
Eine Deklaration des Standard-Namespaces außerhalb von :matches() beeinflusst nicht die impliziten Universal-Selektoren innerhalb, wie folgendes Beispiel zeigt:
*:matches(:hover, :focus) { color: red }
*:matches(*:hover, *:focus) { color: red }
: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.
Änderungen in CSS Level 4[Bearbeiten]
In Level 4 darf das Argument der Pseudoklasse auch ein zusammengesetzter Selektor sein.
