Der not() Selektor - Selten genutztes CSS #1


CSS ist mächtig. CSS ist allgegenwärtig. CSS ist mein täglich Brot. Dennoch (oder gerade deshalb) bin ich immer wieder überrascht das es doch noch das ein oder andere zu lernen gibt. Unbekannte Selektoren, seltsame Properties und noch nie genutzte Values.

Damit ich (und ihr?) noch etwas lerne, werde ich hier eine kleine Serie von (zumindest mir) bis dato unbekannten Arbeitsweisen, Funktionen und Techniken mit CSS starten. Fangen wir mal mit einem Selektor an, der mir über die Jahre sicherlich eine ganze Menge Arbeit abgenommen hätte:

Der :not() Selektor.

Kurz gesagt: Damit wählt man ein Element aus das NICHT eine bestimmte Klasse hat. Man macht also genau das Gegenteil davon, wofür Selektoren eigentlich genutzt werden. Folgendes HTML Beispiel:

  • Home
  • Menü
  • Blog
  • Links

Wir haben hier ein einfaches Menü als "Unordered List" (ul) mit einem Listen- Element (li) das mit der CSS Klasse "active" als aktives Element gekennzeichnet ist und drei andere Listen- Elemente die nicht weiter ausgezeichnet sind. Aber gerade diese drei nicht weiter "beschriebene" Elemente wollen wir jetzt per CSS stylen, ohne dass das "active" Element davon beeinflusst wird. Nehmen wir an wir wollen die Textfarbe in Rot ändern, während das aktive "li" Element seine Basisfarbe behält. Dies geht mit dem not() Selektor wie folgt:

ul.samplemenu li:not(.active) { color:red; }

Das Ergebnis:

  • Home
  • Menü
  • Blog
  • Links

Damit werden alle Listen- Elemente der Liste "samplemenu" rot gefärbt die NICHT die Klasse "active" haben.

Der generelle Browsersupport für diesen Selektor sieht dabei auch noch ganz gut aus, nur IE8 und älter muss "leider draussen" bleiben: caniuse.com

Wie stehts mit Euch? Habt ihr den not() Selektor bereits gekannt und genutzt? Gibt es andere CSS Selektoren, Werte oder Properties von denen Ihr meint sie seien mächtig aber zu unbekannt? Dann her damit als Kommentar!