CSS4 in den Startlöchern: Das können die neuen Selektoren
CSS4: Die wohl hartnäckigste Urban Legend des Webs
Obwohl wir unser gesamtes Entwicklerleben von Tutorial-Websites, Fachblogs, Erklärbären, „Internet-Experten“, HTML-Gurus und CSS-Ninjas belogen wurden: CSS4 gibt es nicht. Richtig gehört. CSS4 hat es auch noch nie gegeben – und es wird es nie geben.
Noch während der Entwicklung von CSS2.1 war der damit beschäftigten Gruppe klar, dass es nicht sinnvoll ist, eine Sprache in einzelnen Versionen zu veröffentlichen. Stattdessen wurde CSS in Module zerlegt, die unabhängig voneinander weiterentwickelt werden können.
Mit CSS3 wurde die Sprache CSS an sich fertiggestellt, jetzt werden „nur noch“ die einzelnen Module erweitert oder neue, wie zum Beispiel Flexbox (CSS Flexible Box Layout Module Level 1), hinzugefügt. Einige Module können aber schon mit Level 2 oder 3 starten. So auch die CSS-Selektoren, die jetzt in Version 4 erscheinen werden. Was also im Web als „CSS4“ bezeichnet wird, ist in WahrheitTM die vierte Version der CSS-Selektoren.
Negation
In Version 4 kann dieser Selektor jetzt eine Liste an Klassen übernehmen, es ist also möglich, mehrere Klassen von einem Styling auszuschließen.
div:not(.hero, .slide){
padding:10%;
}
In diesem Beispiel haben alle div
-Elemente ein Padding von zehn Prozent, außer sie besitzen die .hero
– oder die .slide
-Klasse.
Matches
Die :matches
-Pseudoklasse ist das direkte Gegenstück zum :not
-Selektor.
div:matches(.hero, .slide){
padding:10%;
}
In diesem Beispiel haben alle div
-Elemente, die die Klassen .hero
oder .slide
besitzen ein Padding von zehn Prozent.
Relational
Die :has
-Pseudoklasse nimmt eine Liste von in Beziehung stehenden Selektoren entgegen.
p:has(+ dt){
padding:10%;
}
In diesem Beispiel haben alle p
-Elemente, die sich unmittelbar vor einem dt
-Element befinden, ein Padding von zehn Prozent.
article:has(h1, h2){
padding:10%;
}
Der Selektor greift bei jedem article
-Element, das h1
– oder h2
-Elemente enthält, und formatiert mit einem Padding von zehn Prozent.
Case-Sensitivity
Dieser Selektor greift bei jedem Element, dessen Attribut gleich jeder Variante des Eingabewertes ist.
input[value="name" i] {
background:red;
}
In diesem Beispiel werden alle input
-Elemente, die den Wert „Name“, „NAME“, „nAmE“ et cetera enthalten, mit einem roten Hintergrund formatiert.
Sprachen
Die Pseudoklasse :lang
ergänzt die CSS2-Version um Wildcards.
p:lang(*-be) {
color: #ccc;
}
Alle p
-Elemente, die entweder mit Niederländisch für Belgien (nl-be) oder Französisch für Belgien (fr-be) ausgewiesen wurden, besitzen eine graue Schriftfarbe.
Directionality
Die :dir
-Pseudoklasse greift bei allen Elementen in Bezug auf die Schreibrichtung und Sprache des Dokuments.
blockquote:dir(rtl) {
padding-right: 5%;
}
In diesem Beispiel werden alle blockquote
-Elemente mit einem Padding auf der rechten Seite formatiert, aber nur dann, wenn die Sprache von rechts nach links zu lesen ist.
Time-Dimensional
Die Pseudoklassen :current
, :past
und :future
verhalten sich ähnlich wie :matches
und repräsentieren die derzeitige Position innerhalb einer Zeitleiste. Der Selektor kann mehrere Elemente beinhalten und somit gleichzeitig formatieren.
:current(p, li) {
background-color: green;
}
:past(p, li),
:future(p, li) {
background-color: #eee;
}
Angenommen, es werden Absätze und Listen laut vorgelesen, dann werden die derzeit gelesenen Elemente mit einem grünem Hintergrund hinterlegt, schon vorgelesene und bald gelesene Elemente werden grau dargestellt.
Drag & Drop
Zusammen mit dem HTML-Attribut dropzone
können durch die Pseudoklasse :drop
Elemente per Drag & Drop über das Dokument bewegt werden.
:drop(valid active) {
background: green;
}
In diesem Beispiel werden alle validen und aktiven Drop-Zonen grün hinterlegt. Darüber hinaus kann über invalid
erkannt werden, dass die Drop-Zone für das bewegte Objekt invalide ist.
:drop {
outline: 1px solid green;
}
In diesem Beispiel wird jede Drop-Zone mit einer grünen Outline formatiert.
Hyperlink
Mit der :any-link
-Pseudoklasse können alle Elemente angesprochen werden, die über ein href
-Attribut verfügen.
article a:any-link {
font-weight: bold;
}
In diesem Beispiel ist jeder Link innerhalb aller article
-Elemente gefettet.
Local-Link
Mit der :local-link
-Pseudoklasse können Hyperlinks innerhalb der eigenen Site formatiert werden.
a:local-link {
text-decoration: none;
}
Alle Links innerhalb eurer Site werden nicht unterstrichen.
Indeterminate
Checkboxen können unausgewählt, ausgewählt oder keines von beiden sein. Das Letztere kann mit der Pseudoklasse :indeterminate
rausgefunden werden.
:indeterminate + label {
background-color: red;
}
In diesem Beispiel würde das Label, das vor einem Radio-Button oder einer Checkbox steht, rot markiert – aber nur, wenn der Status unbestimmt ist.
Default-Option
Die :default
-Pseudoklasse trifft auf alle UI-Elemente zu, die standardmäßig innerhalb einer Gruppe von ähnlichen Elementen sind. Typischerweise sind das Elemente von Menüs, Buttons in Formularen und select
-Listen.
Validity
Mit den Pseudoklassen :valid
und :invalid
können input
– oder form
-Elemente überprüft werden.
input:valid {
outline: 1px solid green;
}
input:invalid {
outline: 1px solid red;
}
In diesem Beispiel werden Felder mit valider Eingabe grün und mit invalider Eingabe rot umrandet.
Range
Mit den Pseudoklassen :in-range
und :out-of-range
können Positionen innerhalb von Bereichen abgefragt werden.
input[type="number"]:in-range {
background-color: green;
}
input[type="number"]:out-of-range {
background-color: red;
}
In diesem Beispiel wird der Hintergrund bei einer Mengenangabe innerhalb eines Bereichs grün, außerhalb des Bereichs rot gefärbt.
Erforderlichkeit
Mit den Pseudoklassen :optional
und :required
können input
-Elemente selektiert werden, die erforderlich sind – oder eben nicht.
Nutzer-Interaktion
Die Pseudoklasse :user-error
kann genutzt werden, um Eingabefehler nach der Nutzer-Interaktion zu selektieren. Die Pseudoklasse muss auf ein Form-Element zutreffen, das :invalid
, :out-of-range
oder leer aber :required
ist.
input:user-error {
color: red;
}
Hier erscheint jede inkorrekte input
-Eingabe in roter Schrift.
Editierbarkeit
Mit den zwei :read-only
– und :read-write
-Pseudoklassen könnt ihr Elemente selektieren, die entweder editierbar oder nicht editierbar sind.
:read-only {
color: black;
}
:read-write {
color: green;
}
In diesem Beispiel werden Texte, die nicht editierbar sind, in schwarzer Schrift angezeigt. Editierbare Texte werden in grüner Schrift dargestellt.
Tree-Structural
Die :blank
-Pseudoklasse wählt Elemente im Dokument aus, die Steuerzeichen wie Leertasten, Tabulatoren und „Segment Breaks“ wie zum Beispiel das pre
-Element enthalten, sonst aber keinen Inhalt besitzen.
Grid-Structural
Die :nth-column
-, und :nth-last-column
-Pseudoklassen wirken auf strukturierte Gitter, wie zum Beispiel Tabellen.
:nth-column(2n) {
background: green;
}
:nth-last-column(3n+1) {
background: blue;
}
Hier wird jede zweite Spalte grün gefärbt, und jede dritte Spalte, plus einem Offset von 1, blau – beginnend von hinten.
In diesem Artikel beziehen wir uns auf den Selectors Level 4 – W3C Working Draft und den W3C Selectors Level 4 – Editor’s Draft . Wir werden diese Liste immer wieder ergänzen und aktuell halten.
Welchen neuen Selektor werdet ihr voraussichtlich am häufigsten einsetzen?
Hammer neue Sachen!! Mir gefällt die Local-Link-Geschichte sehr: Man kennt das ja, wenn man sich nicht besonders sicher ist ob der Link den man anklickt einen die Site verlassen lässt oder nicht. Nett!! Es geht in eine spannende Richtung, allerdings wird der Post hier im Netz verteilt als ginge es wirklich um CSS4… Klick-Generierung ist euer Steckenpferd, wa ? :p
Das ging bisher eigentlich auch schon recht zuverlässig umgekehrt, zumindest solange man bei lokalen Links keine komplette URL angibt. Mit a[href^=“http“] kannst du dann die externen Links formattieren.
Klasse neue CSS4 Erweiterungen. So macht gestalten richtig Spaß!
Könnt ihr den Text bitte noch mal überprüfen, ob ihr „und“ und „oder“ richtig verwendet habt? Bei div:matches(.hero, .slide) werden dem Text nach beide Klassen benötigt. Das könnte man aber bereits mit div.hero.slide abfragen und ich bin mir relativ sicher, dass das hier „oder“ heißen muss. Bei article:has(h1, h2) ist das glaube ich auch ein „oder“.
Hallo Hendrik,
Danke für den Hinweis!
input[type=“number“]:out-of-range {
background-color: green;
}
müsste „red“ sein
Bei Range ist ein Fehler im CSS bei der Farbe. Die ist beide Male grün.
Interessant wirds mit has und validate in kombination … damit können dann auch labels und behilfs-divs innerhalb von forms schick ohne js in szene gesetzt werden :)
„In diesem Beispiel wird der Hintergrund bei einer Mengenangabe innerhalb eines Bereichs grün, außerhalb des Bereichs rot gefärbt.“
input[type=“number“]:out-of-range {
background-color: green;
}
Was jetzt? Da hat sich offenbar ein fehler eingeschlichen ;-)
Spät aber doch: Danke für den Hinweis! Jetzt färbt sich der Hintergrund wirklich rot :)