Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung
css4-neue-selektoren

CSS4: die neuen Selektoren

Was werden wir erfahren von den neuen CSS4 Selektoren?

Hier kommen ein paar Antworten auf die Frage, warum CSS4 ein Mythos sein soll.

CSS4 die hartnäckigste Urban Legend des Webs.Die ganze Zeit wurde von den gesamten Entwicklern von Tutorial-Websites, Erklärbären, Internet-Experten, HTML-Gurus und CSS-Ninjas gesagt, ein CSS4 gibt es nicht.

Jedoch wurde einigen Arbeitsgruppen während der Entwicklung von CSS schon klar, dass es besser ist, eine Sprache nicht in einzelnen Versionen zu veröffentlichen, sondern in CSS-Module zu zerlegen und voneinander weiterzuentwickeln.

Mit dem Produkt CSS3 wurde die Sprache CSS eigentlich schon fertiggestellt, jetzt können die einzelnen Module bearbeitet werden oder sogar neue hinzugefügt werden, wie z.B. bei Flexbox (CSS Flexible Box Layout Module Level 1). Manche Module kann man auch schon mit Level 2 oder 3 starten, wie auch die CSS-Selektoren, die in Version 4 erscheinen. Im Web wird diese als CSS4 bezeichnet, ist jedoch in Wahrheit die vierte Version der CSS-Selektoren.

Negation

Bei der Version 4 kann der Selektor jetzt eine Liste an Klassen übernehmen. Hierbei können auch mehrere Klassen von einem Styling ausgeschlossen werden.

div:not (.hero, .slide) {
    padding: 10%;
}

Hier haben alle div-Elemente ein Padding von zehn Prozent, außer sie haben ein .hero– oder die .slide-Klasse.

Matches

Die :matches-Pseudoklasse ist das Gegenstück zum :not-Selektor.

div:matches (.hero, .slide) {
    padding: 10%;
}

Hier haben alle div-Elemente die die Klassen .hero oder .slide besitzen ein Padding von zehn Prozent.

Relational

Die :has-Pseudoklasse nimmt eine Liste von stehenden Selektoren entgegen.

p:has(+ dt)  {
    padding: 10%
}

In dem Beispiel haben alle p-Elemente, die sich vor einem dt-Element stehen, ein Padding von zehn Prozent.

article:has (h1, h2) {
    padding: 10%
}

Hier greift der Selektor bei jedem article-Element, das h1– oder h2-Element enthält und setzt einen Padding von zehn Prozent.

Case-Sensitivity

Der Selektor greift hier bei jedem Element, dessen Attribut gleich jeder Variante des Eingabewertes ist.

Input[value=“name“ i] {
    Background: red;
}

Hier werden alle input-Elemente, die den Wert „Name“, „NAME“, „nAmE“, usw. 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 mit Niederländisch für Belgien(nl-be) oder auch Französisch für Belgien (fr-be) ausgewiesen wurden, besitzen eine graue Schriftfarbe.

Directionality

Die :dir-Pseudoklasse gibt es bei allen Elementen in Bezug auf die Sprache des Dokuments sowie auf die Schreibweise.

blockquote:dir (rtl)  {
    padding-right: 5%;
}

Hier werden alle blockquote-Elemente mit einem Padding auf der rechten Seite formatiert, jedoch nur wenn die Sprache von rechts nach links lesbar ist.

Time-Dimensional

Ähnlich wie bei matches verhalten sich die Pseudoklassen :current, :past und :future und agieren in derzeitiger Position innerhalb einer Zeitleiste. Mehrere Elemente kann der Selektor beinhalten und auch gleichzeitig formatieren.

:current (p, li)  {
    background-color: green;
}
:past (p, li),
:future (p, li)  {
    Background-color: #eee;
}

Für den Fall, dass Absätze und Listen laut vorgelesen werden, werden die gelesenen Elemente mit grünem Hintergrund hinterlegt, ganz anders bei von gelesenen oder bald gelesenen Elementen, die werden dann grau gekennzeichnet.

Drag & Drop

Gemeinsam mit dem HTML-Attribut dropzone können durch die Pseudoklasse :drop Elemente per Drag & Drop über das Produkt bewegt werden.

:drop (valid active)  {
    Background: green;
}

Hierbei werden alle validen und aktiven Drop-Zonen grün gekennzeichnet. Außerdem kann über invalid gesehen werde, dass der Drop-Bereich für das bewegte Projekt invalide ist.

:drop  {
    outline: 1px solid green;
}

Hier wird jede Drop-Zone mit grünem Outline formatiert.

Hyperlink

Bei der :any-link-Pseudoklasse könne alle Elemente aufgenommen werden, die über ein href-Attribut verfügen.

article  a:any-link  {
    font-weight: bold;
}

Hier ist jeder Link innerhalb der article-Elemente gefettet.

Local-Link

Mit der Pseudoklasse :local-link können Hyperlinks in der eigenen Site formatiert werden.

a:local-link  {
    text-decoration:  none;
}

Hier werden alle Links auf eurer Site nicht unterstrichen.

Inteterminate

Mit Pseudoklasse :indeterminate kann herausgefunden werden, ob Checkboxen unausgewählt oder ausgewählt oder nichts von beiden sind.

:indeterminate + label  {
    background-color:  red;
}

In dem Fall würde das Label, das sich vor einer Checkbox oder einem Radio-Button befindet, rot gekennzeichnen, aber nur wenn hier der Status unbestimmt ist.

Default-Option

Die :default Pseudoklasse bezieht sich auf alle UI-Elemente. Das sind Elemente von Menüs, Buttons in Formularen und select-Listen.

Validity

input– oder form– Elemente können mit den Pseudoklassen :valid und :Invalid überprüft werden

input:valid  {
    outline: 1px solid green;
}
input:invalid  {
    outline:  1 px solid red;
}

Hier werden die Felder dann mit valider Eingabe grün oder bei invalider Eingabe rot umrandet.

Range

Positionen können innerhalb von Bereichen durch Pseudoklassen :in-range und :out–of-range abgerufen werden.

input [type=“number“]:in-range  {
    background-color: green;
}
input [type=“number“]:out-of-range {
    backgraund-color: green;
}

Hier wird der Hintergrund bei der Mengenangabe in einem Bereich grün und außerhalb rot gefärbt.

Erforderlichkeit

input-Elemente können mit den Pseudoklassen :optional und :required selektiert werden, dort wo es erforderlich ist oder eben auch nicht

Nutzer-Interaktion

Man kann die Pseudoklasse :user-error nutzen, um Eingabefehler, nach der Nutzer-Interaktion, zu selektieren. Die Pseudoklasse muss jedoch auf ein form-Element zutreffen, das :invalid, :out-of-range oder aber leer :required ist.

input:user-error {
    color:  red;
}

In diesem Beispiel erscheint jede inkorrekte input Eingabe in Rot.

Editierbarkeit

Mit den zwei Pseudoklassen :read-only und :read-write kann man Elemente selektieren, die editierbar oder auch nicht editierbar sind.

:read-only {
    color:  black;
}
:read-write {
    color:  green;
}

Hier werden nicht editierbare Texte in schwarzer Schrift angeführt und editierbare Texte in grüner Schrift gezeigt.

Tree-Structural

Die Pseudoklassen :nth-column, und :nth-last-column wirken auf strukturierte Gitter, zum Beispiel Tabellen

:nth-column(2n) {
    background: green;
}
:nth-last-column(3n+1)  {
    background: blue;
}

In dem Beispiel wird jede zweite Spalte grün gefärbt und jede dritte Spalte blau, plus einem Offset von 1, beginnend von hinten.
Ich beziehe mich in diesem Artikel auf die Selectors Level 4 – W3C Working Draft und den W3C Selectors Level 4 – Editior´s Draft.