Mit der vierten Version der CSS-Selektoren dürfen sich Webentwickler auf ein paar Erweiterungen freuen, die ihnen ihre tägliche Arbeit erleichtern. Im aktuellen Draft sind zwar noch einige Issues aufgelistet, größere Änderungen sollte es jedoch nicht mehr geben. Obwohl die Selektoren aufgrund von Rückwärtskompatibilität wahrscheinlich erst in fünf Jahren produktiv nutzbar sind lohnt es sich schon jetzt einmal einen Blick auf sie zu werfen. Viele der Selektoren sind speziell auf neue Anforderungen entwickelt worden, die immer häufiger an Webanwendungen gestellt werden.
Negation
In der Negation können Elemente selektiert werden, welche bestimmte Eigenschaften nicht aufweisen. Negationen gibt es bereits seit CSS3. In CSS4 können ihnen nun jedoch mehrere Argumente übergeben werden.
.snowflake:not(:first-child, .special) {
color: blue;
}
In dem hier gezeigten Beispiel ist zu sehen, dass :first-Child und .special dem Selektor übergeben wurden. Damit wird die Textfarbe für alle außer dem ersten und dem Element mit der Klasse .special auf blau gesetzt.
Matches
Matches sind das ungefähre gegenteil von Negationen. Mit ihnen lassen sich Elemente ansprechen die mindestens eines der aufgeführten Argumente besitzen.
.snowflake:matches(:first-child, .special) {
color: blue;
}
/* Browser specific :-moz-any, :-webkit-any*/
In diesem Beispiel werden alle Elemente mit der Klasse .special oder die jeweils ersten Elemente auf die Textfarbe blau gesetzt.
Relational
Der Relational-Selektor ist wohl einer der am sehnlichst erwarteten Selektoren überhaupt. Mit ihm ist es möglich Elemente nach ihren Kind-Elementen zu selektieren. Leider gibt es noch kein spezifisches Browser-Kürzel für Mozilla oder Webkit. Der Selektor selbst wird ebenso von noch keinem Browser unterstützt.
.container:has(h1, div.special){
color: blue;
}
Jedes Element mit der Klasse .container erhält die Textfarbe blau, wenn dieses Element eine Überschrift h1 oder ein div enthält, das die Klasse .spezial besitzt.
Case-Sensitivity
Der Attribut-Selektor ist bereits aus CSS2 und CSS3 bekannt. Als Erneuerung kann der Wert des zu selektierenden Attributes nun case-insensitive erkannt werden. Hierzu muss lediglich ein i innerhalb des Selektors gesetzt werden.
a[href="www.google.com" i ] {
color: blue;
}
In dem hier gezeigten Beispiel werden alle Hyperlinks zu google blau eingefärbt. Dabei ist es egal ob die Adresse www.google.com oder www.gOOgle.com ist. Beide Varianten werden vom Selektor erkannt.
Direction
Die Richtung in der Elemente angeordnet werden kann seit CSS2 mit dem Property direction angegeben werden. Die Werte hierfür sind entweder von Links nach Rechts (ltr) oder von Rechts nach Links (rtl). In CSS4 gibt es nun einen Selektor, der je nach Richtung der Anordnung die Elemente selektieren kann.
.container:dir(rtl) {
padding-right: 5px;
}
Der obige Code fügt jedem Element mit der Klasse .container ein rechtes Padding von 5 Pixeln hinzu, sofern die Anordnung der Elemente von Rechts nach Links verläuft.
Language
Die Pseudo-Klasse :lang() gibt es bereits seit CSS2. Mit ihr können Elemente, welche das lang-Attribut besitzen selektiert werden. Für einfache Sprachkürzel wie „EN“ oder „FR“ ist das kein Problem. Schwierigkeiten ergeben sich jedoch, wenn man eine Abwandlung der entsprechenden Sprache benutzt, wie etwa Schweizerdeutsch. Die CSS4-Selektoren erlauben daher nun auch Platzhalter.
.container:lang(*-CH) {
color: red;
}
Das Beispiel selektiert alle Sprachkürzel, welche auf -CH enden. Auch das beliebte Schweizerdeutsch de-CH ist damit selektiert.
Hyperlinks
Hyperlinks können nun mit unterschiedlichen Pseudo-Klassen angesprochen werden.
.container:any-link {
color: red;
}
/* Browser specific :-webkit-any-link, :-moz-any-link*/
In diesem Beispiel werden mit :any-link alle Links, welche sich innerhalb von .container befinden angesprochen. In HTML5 ist das nicht nur <a>, sondern auch <area> oder <link>.
:local-link {
color: red;
}
:not(:local-link) {
color: green;
}
Mit :local-link werden Hyperlinks selektiert, welche auf die selbe Domäne verlinken. Das ganze kann natürlich auch negiert werden um externe Links zu kennzeichnen. In dem Beispiel von oben werden alle internen Links rot und alle externen Links grün gefärbt.
Scope
Mit dem Scoped-Attribut können CSS-Styles auf einzelne Elemente angewandt werden. Elemente die außerhalb liegen werden nicht berücksichtigt oder gar überschrieben.
<p>outer</p>
<div>
<style scoped>
p:scope { color: red; }
</style>
<p>inner</p>
</div>
In dem hier gezeigten Beispiel wird jedes p-Element, welches sich innerhalb des umschließenden div-Elementes befindet rot gefärbt.
Drag-and-Drop
Da Webseiten immer interaktiver werden wurden spezielle Pseudo-Klassen für Drag-and-Drop-Interaktionen geschaffen.
.container:active-drop-target {
background-color: yellow;
}
.container:invalid-drop-target {
outline: solid red;
}
.container:valid-drop-target {
outline: solid green;
}
In diesem Beispiel wird das jeweils aktive Ziel-Element mit einem gelben Hintergrund versehen. Dies geschieht mit :active-drop-target. Um anzuzeigen ob ein Element auch per Drag-and-Drop in den jeweiligen Bereich gezogen werden kann wird das Ziel entweder mit :invalid-drop-target und :valid-drop-target rot oder grün umrandet.
Indeterminate
Der Selektor für unbestimmte Elemente greift beispielsweise bei Radio-Buttons, welche noch keine Auswahl haben und ebenso bei Checkboxes welche sich in einem unbestimmten Zustand befinden. Näheres dazu kann hier nachgelesen werden.
fieldset:indeterminate {
color: red;
}
In diesem Beispiel werden alle Auswahl-Elemente rot gefärbt, welche sich innerhalb von fieldset befinden und noch keinen eindeutigen Zustand haben.
Default
Die Default-Pseudo-Klasse selektiert alle Default-Elemente in einer Menge von Elementen. Hierbei kann es sich beispielsweise um die erste Selektion in einem Dropdown oder um den Submit-Button in einer Form handeln.
select:default {
background-color: gray;
}
In dem oberen Beispiel wird die Default-Option in einem <select> mit einer grauen Hintergrundfarbe versehen.
Validity
Mit :valid und :invalid können Eingabe-Elemente angesprochen werden, welche Benutzereingaben prüfen. Dabei handelt es sich beispielsweise um die Validierung von E-Mail-Adressen.
input:invalid {
outline-color: solid red;
}
input:valid {
outline-color: solid green;
}
In diesem Beispiel werden ungültige Eingaben rot und gültige Eingaben grün umrandet.
Range
Die Pseudo-Klassen :in-range und :out-of-range können Elemente selektieren, welche einen eingeschränkten Zahlenbereich besitzen.
input[type="number"]:out-of-range {
outline-color: solid red;
}
input[type="number"]:in-range {
outline-color: solid green;
}
Dieses Beispiel zeigt wie Nummereingaben rot oder grün umrandet werden können, je nachdem ob sich die Eingabe innerhalb oder außerhalb des definierten Zahlenbereichs befindet.
Optionality
In Eingabeformularen wird zwischen benötigten und optionalen Eingabefeldern unterschieden. Um diese auch über CSS-Stylings unterscheidbar zumachen gibt es die Pseudo-Klassen .required und :optional.
:required {
border: 1px solid red;
}
:optional {
border: 1px solid gray;
}
In diesem Beispiel werden benötigte Felder rot und nicht benötigte Felder grau umrandet.
Mutability
Mit den Pseudo-Klassen :read-only und :read-write lassen sich Text-Elemente je nach editierbarkeit selektieren.
:read-only {
color: black;
}
:read-write {
color: gray;
}
Hierbei wird jedes veränderbare Element grau gefärbt und alle anderen erhalten eine schwarze Farbe.
Placeholder-Shown
Die Pseudo-Klasse :placeholder-shown selektiert alle Elemente mit einem Platzhalter-Attribut.
:placeholder-shown {
color: gray;
}
/* Browser specific ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder*/
In diesem Beispiel wird der Platzhalter-Text bei Elementen wie dem Input-Feld auf die Farbe Grau gesetzt.
Grid-Structual
Die Pseudo-Klassen :column, :nth-column und :nth-last-column erlauben es die Spalten einer Tabelle zu selektieren.
:column(.important) {
background-color: yellow;
}
:nth-column(5n) {
background-color: red;
}
:nth-last-column(6n) {
background-color: green;
}
In dem oberen Beispiel wird jede Spalte mit der Klasse important gelb eingefärbt. jede fünfte Spalte rot und jede sechste Spalte von hinten grün.