Das sind die neuen CSS4 selektoren

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.

Leave a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

We use cookies to ensure that we give you the best experience on our website.