Während die wir schon fleißig die aktuellen CSS3 Selectors Level 3 benutzen, arbeitet das W3C an Level 4 der Selectors API. Der aktuelle Editor's Draft zeigt schon jetzt einige interessante neue Funktionen, die uns das Leben erleichtern können.
Da es sich um einen Editor's Draft handelt können einige Funktionen sich noch komplett ändern.
:has Pseudoklasse
Die wohl interessanteste neue Erweiterung dürfte die :has Pseudoklasse sein. Der zugleich simpel und genial ist. Mithilfe dieser Pseudoklasse kann man prüfen ob ein bestimmtes Kind-Element in dem Element vorhanden ist und dafür die Styles anpassen.
Wollen wir jetzt zum Beispiel immer das ganze Formular farblich hervorheben, sobald auch nur ein Input einen invaliden Wert enthält. Das können wir jetzt ganz einfach und ohne Javascript damit lösen.
form:has(input:invalid) {
border-color: red;
}Einen Haken gibt es derzeit dabei aber noch. Die Performance der Pseudoklasse ist noch nicht in der Kategorie "fast". Der entsprechende Kommentar aus dem Editor's Draft: "If some things currently not in the fast profile can reasonably be done in CSS Selectors, we should move them.". Die Zeit wird zeigen, ob es das Feature in die finale Spezifikation schafft.
:matches Pseudoklasse
Ein weiteres cooles Feature ist die Pseudoklasse :matches. Damit ist es möglich die Mehrfach-Selektoren aufgeräumter darzustellen.
Derzeit müssen wir es wie folgt machen:
.startseite h1,
.kontakt h1,
.impressum h1 {
color: #333;
}Mit der :matches Pseudoklasse können wir es einfach und übersichtlich in eine Zeile schreiben:
:matches(.startseite, .kontakt, .impressum) h1 {
color: #333;
}Weitere Features
Es gibt noch eine Reihe an weiteren interessanten Änderungen. Hier eine kurze Liste:
- :not Pseudoklasse wird um eine Mehrfachauswahl der Selektoren ergänzt
- Neue Input Pseudoklassen: (:in-range, :out-of-range, :read-only, :read-write)
Und damit einen Guten Start in die Woche.