CSS Selector :not(s) – alles außer s

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
}

:not() und color: der logische Reinfall

Eigentlich ist :not(s) ein intuitiver Selektor, aber hier lauern echte logische Fallen. Müssten jetzt nicht alle Texte außer Text in p-Tags blau werden?

*:not(p) {
	color:blue;
}

Der Gedanke ist logisch völlig richtig. Aber color vererbt sich, also werden Texte in p-Tags blau, weil sie das Blau erben.

<div style="color: blue;">
  <p>Text</p> 
</div>

Der Text in den p-Tags wird blau, obwohl p selbst keine Eigenschaft zugewiesen wird – Schuld ist die Vererbung! Vererbung kann man sichbar machen, um den Effekt besser zu versehen.

*:not(p) {
	color: blue;
}

p {
	color: initial;
}

Jetzt sind tatsächlich alle Texte und alle border blau, aber alles in p-Tags ist schwarz, weil color: initial die Vererbung ausschaltet.

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 sind 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