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