CSS Selector :not()

CSS Pseudo class not

elem:not(s) wählt alle Elemente, die dem Selektor s nicht entsprechen. Dabei kann s ein einfacher Selektor wie p, div oder h1 sein, ein class- oder id-Selector wie .wrap oder #entry und auch ein Attribut-Selektor wie [title="chimps"].

So lassen sich Elemente vor CSS-Eigenschaften schützen, obwohl sie weder über CSS-Klassen, IDs oder andere Selektoren nicht zu erreichen sind.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

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

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:"";
}

Doppelte Negation :not() :not()

Einige Sprachen wie Spanisch (No hay ningun problema – Das ist kein Problem) haben doppelte Verneinungen auf Lager, Mathematiker sind scharf auf doppelte Verneinung, 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: 500px;
}

.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
css-keyframes-slideshow-schuessel-obst-460
css-keyframes-slideshow-gelber-nachen-460
3 Spalten
css-keyframes-slideshow-schuessel-obst-460
css-keyframes-slideshow-gelber-nachen-460
css-keyframes-slideshow-garten-460
4 Spalten alignwide
css-keyframes-slideshow-schuessel-obst-460
css-keyframes-slideshow-gelber-nachen-460
css-keyframes-slideshow-garten-460
css-keyframes-slideshow-schuessel-obst-460
5 Spalten alignfull
css-keyframes-slideshow-schuessel-obst-460
css-keyframes-slideshow-gelber-nachen-460
css-keyframes-slideshow-garten-460
css-keyframes-slideshow-schuessel-obst-460
css-keyframes-slideshow-schuessel-obst-460