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"].

23-02-02 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. 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.

Aktuell ist has() nur in Safari und iOS und MacOS in Kraft.

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