Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS4 in den Startlöchern: Das können die neuen Selektoren

    CSS4 in den Startlöchern: Das können die neuen Selektoren

Mehr Selektoren für alle! (Grafik: t3n)

Welche Selektoren werden mit CSS4 veröffentlicht und was können sie? Alles, was ihr zum Thema CSS4-Selektoren wissen müsst und die Antwort auf die Frage, warum CSS4 ein Mythos ist.

CSS4: Die wohl hartnäckigste Urban Legend des Webs

Obwohl wir unser gesamtes Entwicklerleben von Tutorial-Websites, Fachblogs, Erklärbären, „Internet-Experten“, HTML-Gurus und CSS-Ninjas belogen wurden: CSS4 gibt es nicht. Richtig gehört. CSS4 hat es auch noch nie gegeben – und es wird es nie geben.

Noch während der Entwicklung von CSS2.1 war der damit beschäftigten Gruppe klar, dass es nicht sinnvoll ist, eine Sprache in einzelnen Versionen zu veröffentlichen. Stattdessen wurde CSS in Module zerlegt, die unabhängig voneinander weiterentwickelt werden können.

Mit CSS3 wurde die Sprache CSS an sich fertiggestellt, jetzt werden „nur noch“ die einzelnen Module erweitert oder neue, wie zum Beispiel Flexbox (CSS Flexible Box Layout Module Level 1), hinzugefügt. Einige Module können aber schon mit Level 2 oder 3 starten. So auch die CSS-Selektoren, die jetzt in Version 4 erscheinen werden. Was also im Web als „CSS4“ bezeichnet wird, ist in WahrheitTM die vierte Version der CSS-Selektoren.

css4
CSS4 oder „CSS3 Selectors Level 4“: Hauptsache, mehr Selektoren für alle! (Grafik: t3n)

Negation

In Version 4 kann dieser Selektor jetzt eine Liste an Klassen übernehmen, es ist also möglich, mehrere Klassen von einem Styling auszuschließen.

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

In diesem Beispiel haben alle div-Elemente ein Padding von zehn Prozent, außer sie besitzen die .hero- oder die .slide-Klasse.

Matches

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

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

In diesem Beispiel haben alle div-Elemente, die die Klassen .hero oder .slide besitzen ein Padding von zehn Prozent.

Relational

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

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

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

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

Der Selektor greift bei jedem article-Element, das h1- oder h2-Elemente enthält, und formatiert mit einem Padding von zehn Prozent.

Case-Sensitivity

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

input[value="name" i] {
	background:red;
}

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

Directionality

Die :dir-Pseudoklasse greift bei allen Elementen in Bezug auf die Schreibrichtung und Sprache des Dokuments.

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

In diesem Beispiel werden alle blockquote-Elemente mit einem Padding auf der rechten Seite formatiert, aber nur dann, wenn die Sprache von rechts nach links zu lesen ist.

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: #eee;
}

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 grau 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: green;
}

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.

:drop {
	outline: 1px solid green;
}

In diesem Beispiel wird jede Drop-Zone mit einer grünen Outline formatiert.

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: bold;
}

In diesem Beispiel ist jeder Link innerhalb aller article-Elemente gefettet.

Local-Link

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

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

Alle Links innerhalb eurer Site werden nicht unterstrichen.

Indeterminate

Checkboxen können unausgewählt, ausgewählt oder keines von beiden sein. Das Letztere kann mit der Pseudoklasse :indeterminate rausgefunden werden.

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

In diesem Beispiel würde das Label, das vor einem Radio-Button oder einer Checkbox steht, rot markiert – aber nur, wenn der Status unbestimmt ist.

Default-Option

Die :default-Pseudoklasse trifft auf alle UI-Elemente zu, die standardmäßig innerhalb einer Gruppe von ähnlichen Elementen sind. Typischerweise sind das Elemente von Menüs, Buttons in Formularen und select-Listen.

Validity

Mit den Pseudoklassen :valid und :invalid können input- oder form-Elemente überprüft werden.

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

In diesem Beispiel werden Felder mit valider Eingabe grün und mit invalider Eingabe rot umrandet.

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: green;
}
input[type="number"]:out-of-range {
	background-color: red;
}

In diesem Beispiel wird der Hintergrund bei einer Mengenangabe innerhalb eines Bereichs grün, außerhalb des Bereichs rot gefärbt.

Erforderlichkeit

Mit den Pseudoklassen :optional und :required können input-Elemente selektiert werden, die erforderlich sind – oder eben nicht.

Nutzer-Interaktion

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

input:user-error {
	color: red;
}

Hier erscheint jede inkorrekte input-Eingabe in roter Schrift.

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: green;
}

In diesem Beispiel werden Texte, die nicht editierbar sind, in schwarzer Schrift angezeigt. Editierbare Texte werden in grüner Schrift dargestellt.

Tree-Structural

Die :blank-Pseudoklasse wählt Elemente im Dokument aus, die Steuerzeichen wie Leertasten, Tabulatoren und „Segment Breaks“ wie zum Beispiel das pre-Element enthalten, sonst aber keinen Inhalt besitzen.

Grid-Structural

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

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

Hier wird jede zweite Spalte grün gefärbt, und jede dritte Spalte, plus einem Offset von 1, blau – beginnend von hinten.

In diesem Artikel beziehen wir uns auf den Selectors Level 4 – W3C Working Draft und den W3C Selectors Level 4 – Editor's Draft . Wir werden diese Liste immer wieder ergänzen und aktuell halten.

Welchen neuen Selektor werdet ihr voraussichtlich am häufigsten einsetzen?

Finde einen Job, den du liebst

10 Reaktionen
Mario Janschitz

Spät aber doch: Danke für den Hinweis! Jetzt färbt sich der Hintergrund wirklich rot :)

Antworten
jdd
jdd

"In diesem Beispiel wird der Hintergrund bei einer Mengenangabe innerhalb eines Bereichs grün, außerhalb des Bereichs rot gefärbt."
input[type="number"]:out-of-range {
background-color: green;
}
Was jetzt? Da hat sich offenbar ein fehler eingeschlichen ;-)

Antworten
Jo
Jo

Interessant wirds mit has und validate in kombination ... damit können dann auch labels und behilfs-divs innerhalb von forms schick ohne js in szene gesetzt werden :)

Antworten
FLIPZOOM
FLIPZOOM

Bei Range ist ein Fehler im CSS bei der Farbe. Die ist beide Male grün.

Antworten
Peter
Peter

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

müsste "red" sein

Antworten
Hendrik
Hendrik

Könnt ihr den Text bitte noch mal überprüfen, ob ihr "und" und "oder" richtig verwendet habt? Bei div:matches(.hero, .slide) werden dem Text nach beide Klassen benötigt. Das könnte man aber bereits mit div.hero.slide abfragen und ich bin mir relativ sicher, dass das hier "oder" heißen muss. Bei article:has(h1, h2) ist das glaube ich auch ein "oder".

Antworten
Mario Janschitz

Hallo Hendrik,
Danke für den Hinweis!

Antworten
Mork vom Ork
Mork vom Ork

Klasse neue CSS4 Erweiterungen. So macht gestalten richtig Spaß!

Antworten
Moe
Moe

Hammer neue Sachen!! Mir gefällt die Local-Link-Geschichte sehr: Man kennt das ja, wenn man sich nicht besonders sicher ist ob der Link den man anklickt einen die Site verlassen lässt oder nicht. Nett!! Es geht in eine spannende Richtung, allerdings wird der Post hier im Netz verteilt als ginge es wirklich um CSS4... Klick-Generierung ist euer Steckenpferd, wa ? :p

Antworten
irgendein Spinner
irgendein Spinner

Das ging bisher eigentlich auch schon recht zuverlässig umgekehrt, zumindest solange man bei lokalen Links keine komplette URL angibt. Mit a[href^="http"] kannst du dann die externen Links formattieren.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen