So langsam steht auch CSS 4 an den Start. Hier möchte Ich euch mal eine kleine Vorschau der neuen Selektoren anbieten.
Negation:
Negation das heißt das ab jetzt jeder Selektor eine Liste an Klassen übernehmen kann.
Beispiel
div:not(.klasse1, .klasse2){
padding:10%;
}
Matches
Mit dem Selektor:matches hat man ein direktes Gegenstück zu dem :not Selektor eingeführt.
div:matches(.klasse1, .klasse2){
padding:10%;
}
Case-Sensitivity
Dieser Selektor greift bei jedem Element, dessen Attribut gleich jeder Variante des Eingabewertes ist.
input[value="name" i] {
background:blue;
}
Dieses Codeschnipselbeispiel lässt alle Input Elemente mit dem Wert"Name" Blau darstellen.
Sprachen
Die Pseudoklasse :lang
ergänzt die CSS2-Version um Wildcards.
p:lang(*-en) {
color: blue;
}
Alle p-Elemente, die entweder mit Englisch ausgewiesen wurden, besitzen eine blaue Schriftfarbe. Dieses Spiel kann man mit jeder ausgewiesenen Sprache machen.
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: #blue;
}
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 blau 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: blue;
}
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.
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: 600;
font-size:25px;
color:blue;
}
In diesem Beispiel ist jeder Link innerhalb aller article
-Elemente fett und in Schriftgröße 25px, sowie in Blauer Farbe.
Local-Link
Mit der :local-link
-Pseudoklasse können Hyperlinks innerhalb der eigenen Site formatiert werden.
a:local-link {
color:red;
}
Alle Links innerhalb eurer Site haben eine Rote Farbe.
Validity
Mit den Pseudoklassen :valid
und :invalid
können input
– oder form
-Elemente überprüft werden.
input:valid {
outline: 1px solid yellow;
}
input:invalid {
outline: 1px solid blue;
}
In diesem Beispiel werden die Felder mit valider Eingabe gelb und mit invalider Eingabe blau umrandet.
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: blue;
}
In diesem Beispiel werden Texte, die nicht editierbar sind, in schwarzer Schrift angezeigt. Editierbare Texte werden in blauer Schrift dargestellt.
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: yellow;
}
input[type="number"]:out-of-range {
background-color: blue;
}
In diesem Beispiel wird der Hintergrund bei einer Mengenangabe innerhalb eines Bereichs gelb, außerhalb des Bereichs blau gefärbt.
Wenn Ihr mehr über die neuen CSS Selektoren wissen wollt, könnt Ihr das auf der draft css Webseite von W3C weiter lesen.