CSS Selector :not()

CSS Pseudo-Klasse not

li:not(.active) selektiert alle li-Elemente, die nicht mit der Klasse active ausgezeichnet sind. Das erspart eine Extra-Klasse wie inactive. So lassen sich Elemente vor CSS-Eigenschaften schützen, obwohl sie weder über CSS-Klassen, IDs oder andere Selektoren nicht zu erreichen sind.

<ul>
   <li class="active"> … </li>
   <li class="active"> … </li>
   <li> … </li>
   <li class="active"> … </li>
   <li>  … </li>
</ul>

li:not(.active) { 
   background: gray
}

Auch Attribut-Selektoren können Elemente von CSS-Eigenschaften ausschließen, so z.B. alle li-Elemente ohne class-Attribut.

<ul>
   <li></li>
   <li class="wrap"></li>
   <li class="active"></li>
   <li></li>
</ul>

li:not([class]) {
   background: gray
}

Der has()-Selektor

elem:has(child) spricht alle Elemente an, die mindestens ein bestimmtes Child-Element enthalten. Das macht has() zu einem Vorgänger- oder Parent-Selektor und zu einem Gegenstück des not-Selektors.

Auf diesen Selektor haben Webentwickler lange gewartet, aber seit Ende 2023 wird der has-Selektor von allen modernen Browsern unterstützt.

Pseudo-Elemente – keine einfachen Selektoren

Pseudo-Elemente wie ::before und ::after sind keine einfachen Selektoren, denn sie sprechen keine DOM-Elemente an, sondern Teile eines Textes ohne eigenes HTML-Element.

:not () funktioniert darum nicht mit before, after oder active. Das Kennzeichnen eines externen Links kann also nicht durch ein :not () :: before eingeschränkt werden, sondern muss explizit zurückgenommen werden.

a[href^="https://"]:before {      // Externe Links kennzeichnen
   content:"➚ "
}

a[href^="https://www.mediaevent"]:before { // nicht aber Links der eigenen Seite
   content:"";
}

Also, das geht:

p:not(:first-of-type) {
    color:orange
}

Das geht nicht.

p:not(:first-of-line) {
    color:orange
}

:first-of-type spricht ein Element an, first-of-line hingegen nicht.

Doppelte Negation :not() :not()

Einige Sprachen wie Spanisch (No hay ningun problema – Das ist kein Problem) haben doppelte Verneinungen auf Lager, Mathematiker sind genauso scharf auf doppelte Verneinungen wie Programmierer, aber CSS ist strikt dagegen. Ein ODER haben wir in CSS ebenfalls nicht.

Aber trotzdem gibt es eine Möglichkeit, Stile für mehrere Elemente mit mehr als einem not zu setzen oder zu verhindern. Wieder einmal mit einem Beispiel aus dem CSS für den Gutenberg-Editor in WordPress oder Drupal.

.wp-block-columns:not(.alignwide):not(.alignfull) {
	max-width: 400px;
}

.wp-block-columns.alignwide {
	max-width: 600px;
}

.wp-block-columns.alignfull {
	max-width: 800px;
}

Spalten, die mit class="alignwide" bzw. class="alignfull" notiert sind, sollen max. 500px breit werden. Spalten ohne alignwide / alignfull wachsen mit zunehmenden Platzangebot.

2 Spalten

3 Spalten

4 Spalten alignwide

5 Spalten alignfull