Selektoren in CSS/Pseudoklasse
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 wie im letzten Kapitel sind dafür gedacht, Elemente aufgrund ihrer Position im DOM zu selektieren.
Inhaltsverzeichnis
dynamische Pseudoklassen
Dynamische Pseudoklassen selektieren Elemente aufgrund einer Benutzeraktion.
Im einzelnen sind dies:
für Maus- und Tastaturinteraktionen
für Formularelemente
Maus- und Tastaturinteraktionen
Die Pseudoklassen :hover, :active und :focus sprechen auf unmittelbare Interaktion des Benutzers an. Die Pseudoklassen selektieren Elemente, die …
- mit dem Mauszeiger berührt werden (
:hover; englisch to hover: schweben), - den Fokus (
:focus) erhalten, zum Beispiel durch die Tabulatortaste ↹ oder - aktuell angeklickt sind (
:active).
Ursprünglich für Verweise gedacht, sind diese Pseudoklassen in allen relevanten Browsern auf beliebige Elemente anwendbar. Allerdings ist es nicht sinnvoll, normalen Text beim Überfahren mit der Maus anders zu formatieren.
a:focus { background-color: red; color: black;}
a:hover { background-color: blue; color: white; }
a:active { background-color: yellow; color: black; }
<ul>
<li><a href="https://selfhtml.org">selfhtml</a></li>
<li><a href="https://forum.selfhtml.org">selfhtml Forum</a></li>
<li><a href="https://wiki.selfhtml.org">selfhtml Wiki</a></li>
</ul>
Link-Elemente, die mit der Tabulatortaste ↹ ausgewählt werden, erhalten einen roten Hintergrund, werden sie mit dem Mauszeiger berührt, wechselt der Hintergrund zu blau, während die Links angeklickt sind, ist ihre Hintergrundfarbe gelb.
:focus zuvor notierte Eigenschaften für :hover, sodass ein mit der Tabulator-Taste ausgewähltes Element scheinbar nicht auf :hover reagiert.
:hover problematisch. Beispielsweise kann dies zur Nichtbedienbarkeit einer Navigation führen, falls Unterpunkte per :hover ausgeklappt werden sollen.In manchen Stylesheets findet man auch die Auszeichnung a:link. Sie selektiert alle a-Elemente, die auch einen Link darstellen, also eigentlich alle.
focus-within
Die Pseudoklasse :focus-within selektiert ein Element, wenn
- es selbst oder
- eines seiner Nachfahren
den Fokus besitzt.
fieldset:focus-within {
border-color: #dfac20;
background: #fffbf0;
}
fieldset:focus-within legend {
color: black;
background: white;
border-bottom-color: #dfac20;
}
Erhält ein Nachfahrenelement des fieldsets den Fokus, so wird dieses Element und seine Überschrift verändert.
Damit ist in gewisser Weise eine Rückwärts-Selektion möglich.
Weblinks
- css-tricks: Solved With CSS! Dropdown Menus By Una Kravets On May 1, 2018 (CSS-Dropdown mit focus-within)
- deque: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
- css-tricks: Focusing on Focus Styles
für Ziele von Verweisen
Mithilfe der Pseudoklasse :target werden Elemente selektiert, die Ziel eines Verweises sind. Die CSS-Anweisungen gelten nur dann, wenn der Verweis gerade aktiviert wurde.
:target {
color: red;
font-weight: bold;
}
In diesem Beispiel wird jeweils das aktuell angesprungene Verweisziel in roter, fetter Schrift dargestellt.
Ein Klicken auf den unteren Link löst die Selektion wieder auf. Es wird nichts eingefärbt, da kein Element die id top besitzt.
Infobox
2013 wurden für das SELF-Wiki Beispiele entwickelt, um eine Infobox und eine Bildergroßansicht auf- und zuzuklappen. Mit :target kann man das Ziel eines (internen) Links selektieren. Ein interner Link auf eine mit CSS ausgeblendete Infobox, kann durch einen Klick das Element mittels :target wieder sichtbar machen. Durch einen weiteren Klick auf einen anderen Link verliert die Infobox das :target und wird wieder unsichtbar.
Achtung!
Eine Infobox mit :target bewirkte, dass die Browser-Historie vollgemüllt wird. Ein Klick auf die Pfeil-zurück-Taste brachte den Nutzer nicht auf die letzte Seite, sondern in den letzten internen Link. Das ist eigentlich unpraktisch.
Heute werden Aufklapp-Mechanismen mit den nativen details- und dialog-Elementen, dem popover-Attribut oder wenigen Zeilen JavaScript realisiert:
- Infobox
- [Bilder im Internet/Bildwechsler
Siehe auch
- HTML/Tutorials/Links/Seiteninterne Verweise
- Autorennen: CSS-Animation, ausgelöst durch
:target
für Formularelemente
disabled, enabled, checked
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. Es gibt jedoch auch Formularelemente, deren Darstellung sich mit CSS weitreichender beeinflussen lässt, wie zum Beispiel Texteingabefelder.
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>
checked ist integraler Bestandteil des Checkbox-Hack und kann damit genutzt werden, um dynamisches Verhalten rein mit CSS zu realisieren.:valid und :invalid
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.
Siehe auch
- Formulare/browsereigene Validierung, dort insbesondere required und pattern
- Formulare/Eingaben mit JavaScript validieren
:in-range und :out-of-range
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.
input {
border: thin solid black;
}
input:in-range {
background-color: rgb(0 255 0 / 0.25);
}
input:out-of-range {
background-color: rgb(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
:where()
Die specificity-adjustment-Pseudoklasse :where() ist eine Variante der funktionalen Pseudoklasse :is(). Der einzige Unterschied ist, dass die Selektoren innerhalb von :where() nicht zur Spezifität des Gesamtselektors beitragen.
:is()
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.[1]
Selektoren, die innerhalb der :is()-Pseudoklasse angegeben werden, werden in der Spezifität des Selektors berücksichtigt. Wenn man das nicht wünscht, kann statt dessen die :where()-Pseudoklasse verwendet werden, die sich im Übrigen identisch zu :is() verhält.
:is(:link, :visited) { color: red }
Das Beispiel setzt die Schriftfarbe aller Verweise auf rot (Hinweis: Das Beispiel ist äquivalent zu any-link bzw. [href]).
Hinweis bei Verwendung von CSS-Namespaces: Die Selektoren innerhalb von :is() beachten einen definierten Standard-Namespace nur, wenn sie explizit einen Typ- oder Universalselektor enthalten. Ein mögliches Namespace-Präfix außerhalb des :is() gilt dann nicht innerhalb von :is()!
*|*:is(:hover, :focus) { color: red }
*|*:is(*: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 :is explizit angegeben wurde.
:not()
Die Pseudoklasse :not() erwartet als Argument einen beliebigen Selektor. Sie spricht dann alle diejenigen Elemente an, auf die das Argument nicht zutrifft.
In Level 3 der Selektoren-Spezifikation durfte :not() nur einen einfachen Selektor enthalten, und :not() durfte nicht geschachtelt werden. Die meisten Browser unterstützen mittlerweile den Level 4, der auch Kombinatoren und Selektorenlisten zulässt und das Schachtelungsverbot aufhebt. Pseudoelemente (wie z. B. ::after) sind allerdings nicht zulässig.
a:not([href*="example."]) { background: red; }
In diesem Beispiel werden alle Link-Elemente, deren href-Attribut nicht die Zeichenkette „example.“ enthält mit einem roten Hintergrund versehen.
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.
:has()
Mit der Pseudoklasse :has() geht ein alter Traum der Webentwickler in Erfüllung – und ein Alptraum der Browserentwickler. Mit :has() kann man Elemente nach Vorhandensein bestimmter Kindelemente stylen, beispielsweise könnte man für Menüs einem li-Element, das ein ul-Element enthält, per ::after-Pseudoelement einen Drop-Down Pfeil geben.
li:has(> ul)::after {
content: "▾";
}
Mehr dazu im Referenzartikel [[CSS/Selektoren/has.
