Css Schreiben - Selectors Level 4

Wir werden uns heute mit einigen CSS Selektoren beschäftigen, von denen ich besser vor meinem ersten Projekt was gehört hätte.

Die „neuen" CSS Pseudoklassen

Seit der Einführung des Moduls "Selectors Level 4" (selectors-4) haben Entwickler die Möglichkeit, einige neue CSS Pseudoklasse zu verwenden, die es in sich haben.
Die Erste, die wir uns ansehen möchten, ist die :is() Pseudoklasse. Sie kann ein wahrer Lebensretter sein. Sie kann nämlich eine Liste von Selektoren nehmen.
Das geht doch auch mit einem einfachen Komma, mögen jetzt welche sagen, und hätten Recht daran. Deswegen demonstrieren wir einfach mal die Unterschiede mit der klassischen Auflistung und der is() Methode.

Wir wollen alle Überschriften selektieren:

mit Komma
h1, h2, h3 , h4, h5, h6 {color:black;}

mit :is()
:is(h1, h2, h3 , h4, h5, h6 ) {color:black;}

Soweit ist der Unterschied minimal und ein Nutzen ist noch nicht ersichtlich.
Selektieren wir doch mal alle h1 Überschriften, die in einer Section , Artikel, Nav und unserer Klasse myClass vorkommen.

section h1, article h1, nav h1, .myClass h1 {color:black;}

:is(section,article,nav,.myClass) :is(h1){color:black;}

Um es noch deutlicher zu machen möchten wir nicht nur die h1 sondern alle Überschriften in Section, Artikel, Nav und myClass selektieren die aber nur in der main drin sind

mit dem is selector
main :is(section,article,nav,.myClass):is(h1, h2, h3 , h4, h5, h6) {color: red;}

Wenn ich es mit den Kommas auflisten wollte, würde ich sehr lange daran sitzen müssen.
Selbst mit Sass wäre das umständlicher zu schreiben als mit der :is() Pseudoklasse.

Die nächste Pseudoklasse ist die :where() Klasse.
Sie funktioniert im Prinzip genauso wie die :is() Klasse, mit einem kleinen Unterschied. Die Spezifität ist bei :where() immer Null (0,0,0), bei :is() jedoch ist die Spezifität immer das, was am höchsten ist. Das bedeutet, wenn ich z.B. ein Grund-still schreibe, das ich bei Bedarf überschreiben möchte, verwende ich die :where() Pseudoklasse. Wenn ich mit der :is() neben Tags und Klassen auch eine ID selektiere, werden alle Selektionen mit der Spezifität der ID (1,0,0) gestaltet. Nächsten Monat gehen wir genauer auf die Spezifität ein.

Als Nächstes möchte ich die :has() Pseudoklasse vorstellen. Leider wird sie noch nicht von allen relevanten Browsern unterstützt. Doch das wird sich hoffentlich in Zukunft ändern. Die :has() Pseudoklasse wird von vielen als Eltern-Selektor genannt. Dabei ist er eher ein Familien-Selektor, da sie neben den Eltern auch Geschwister-Elemente selektieren kann.

Ein kleines Beispiel:

h2:has(+ p){color: red;}
Nur die h2 Überschrift, auf die ein Paragraph folgt, wird rot.

h3:has(div){color: blue;}
Nur die h3 Überschrift, die ein div als Kind hat, wird Blau.

Damit ist es sogar möglich, logische Operationen durchzuführen.

div:has(video, audio){background-color:gray:}
Die Div wird Grau, wenn es ein Video ODER Audio enthält.

div:has(video):has(audio){background-color:yellow:}
Die Div wird Gelb, wenn es ein Video UND Audio enthält.

Wenn wir bei Logik sind, darf natürlich das :not() nicht fehlen.
Sie ist nicht ganz so neu wie die anderen und hat eine relativ gute Browser-Unterstützung.
Sie macht genau das, was es vermuten lässt, sie schließt aus.

.container:not(h1){color:green;}
Alles in der Klasse container außer die h1 Überschrift bekommt die Farbe Grün.

Mehr über Selectors Level 4 erfährt ihr hier.

Bild von Philipp Kleindienst auf Pixabay