CSS/Tutorials/Selektoren/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.
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;
}
<fieldset>
<legend>persönliche Daten</legend>
<label>Name:
<input placeholder="Mustermann">
</label>
<label>Vorname:
<input placeholder="Max">
</label>
</fieldset>
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 können Sie 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.
Problem der Infobox mit :target ist, dass die Browser-Historie vollgemüllt wird. Ein Klick auf die Pfeil-zurück-Taste bringt den Nutzer nicht auf die letzte Seite, sondern in den letzten internen Link. Das ist eigentlich unpraktisch.
Achtung!
Heute werden Aufklapp-Mechanismen mit den nativen details- und dialog-Elementen, dem popover-Attribut oder wenigen Zeilen JavaScript realisiert:
- Infobox/Akkordeon mit details
- Infobox/modale_Dialogfenster
- Bildwechsler im DOM-Tutorial
- JavaScript/Tutorials/Web Animations/Komfort-Bildwechsler
--Matthias Scharwies (Diskussion) 17:36, 28. Mai 2023 (CEST)
Siehe auch
- HTML/Tutorials/Links/Seiteninterne Verweise
- Autorennen: CSS-Animation, ausgelöst durch
:target - Bildwechsler im DOM-Tutorial
- JavaScript/Tutorials/Web Animations/Komfort-Bildwechsler
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. 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>
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>
Siehe auch
- HTML/Tutorials/Formulare/browsereigene Validierung, dort insbesondere required und pattern
- JavaScript/Tutorials/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>
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.
Selektoren, die innerhalb der :is()-Pseudoklasse angegeben werden, werden in der Spezifität des Selektors berücksichtigt. Wenn Sie das nicht wünschen, können Sie statt dessen die :where()-Pseudoklasse verwenden, die sich im Übrigen identisch zu :is() verhält.
:is(:link, :visited) { color: red }
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 }
: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.
