CSS, HTML und Javascript mit {stil}

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

18-12-15 SITEMAP

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.