Anzeige
Anzeige
UX & Design
Artikel merken

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

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.

Von Mario Janschitz
5 Min. Lesezeit
Anzeige
Anzeige

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

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
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.

Anzeige
Anzeige
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.

Anzeige
Anzeige
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.

Anzeige
Anzeige
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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
10 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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

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
Mork vom Ork

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

Antworten
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
Peter

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

müsste „red“ sein

Antworten
FLIPZOOM

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

Antworten
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
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
Mario Janschitz

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

Antworten
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige