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.
