Der NOT-Selektor als kleines CSS-Wunder

In der Welt von CSS finden sich immer wieder Selektoren die im alltäglichen Gebrauch mit der Formatierungssprache untergehen oder nicht jedem geläufig sind. Besonders Neulingen oder Anfängern sind einige Selektoren nicht bekannt, wodurch Hürden bei der Umsetzung bestimmter Aufgaben entstehen können oder der Weg zum Ziel umständlich umgesetzt wird. In dem Zusammenhang möchten wir euch heute den unscheinbar erscheinenden CSS Selektor „not“ (NOT-Selektor) vorstellen.

Mit Hilfe dieser kleinen Pseudo-Class können gleiche Elemente auf einer Ebene von einer Style-Anweisung mit Hilfe einer Klasse ausgeschlossen werden.

Ein Beispiel für den NOT-Selektor:

HTML

<ul>
   <li></li>
   <li></li>
   <li class=“.anders“></li>
   <li></li>
</ul>

CSS

li:not(.different) {
   font-size: 3em;
}

Mit Hilfe des CSS-Selektors „not“ nach dem <li> werden nun alle <li>-Elemente gestaltet außer <li>-Elemente mit der Klasse „anders“. Damit können Elemente von der Gestaltung für gewünschte Eigenschaft ausgeschlossen werden.

Der not-Selektor kann ebenfalls in Verbindung mit komplexen Anweisungen verknüpft werden.

Beispiel:

li:not(:nth-child(2n+1)) {
   font-size: 3em;
}

Wie im oben gezeigten Beispiel kann als Ausschlusskriterium auch eine weitere Anweisung folgen.

Wann setzt ihr den not-Selektor gerne ein? Teilt uns eure Meinung zu dem CSS-Selektor in den Kommentaren mit.