:not

Die CSS-Eigenschaft :not() ist eine Negations-Pseudoklasse und akzeptiert einen einfachen Selektor oder eine Selektorliste als Argument. Sie wählt Elemente aus, die nicht durch das Argument repräsentiert werden. Das übergebene Argument darf keine zusätzlichen Selektoren oder Pseudo-Element-Selektoren enthalten.

Die Möglichkeit, eine Liste von Selektoren als Argument zu verwenden, gilt als experimentell, obwohl die Unterstützung zum Zeitpunkt des Schreibens wächst, einschließlich Safari (seit 2015), Firefox (seit Dezember 2020) und Chrome (seit Januar 2021).

/* the X argument can be replaced with any simple selectors */
:not(X) {
  property: value;
}

In diesem Beispiel haben wir eine unsortierte Liste mit einer einzigen Klasse auf dem <li>

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>

Unser CSS würde alle <li> -Elemente auswählen, mit Ausnahme derjenigen mit der Klasse .different.

/* Style everything but the .different class */
li:not(.different) {
  font-size: 3em;
}

Sie könnten dasselbe auch mit Pseudoklassen tun, die als einfacher Selektor gelten.

p:not(:nth-child(2n+1)) {
  font-size: 3em;
}

Wenn wir jedoch einen Pseudo-Element-Selektor als Argument verwenden, wird dies nicht das erwartete Ergebnis liefern.

:not(::first-line) { /* ::first-line is a pseudo element selector and not a simple selector */
  color: white;
}

Komplexe Selektoren

Diese sind neuer als die grundlegenden :not()-Selektoren.

/* select all <p>s that are not descendants of <article> */
p:not(article *) {

}

Das kann mit etwas mehr Verschachtelung schon ein wenig verwirrend werden. Zum Beispiel

h2:not(:where(article *, section *)) {
  ... 
}

/*
<article>
  <h2> No match! </h2>
</article>

<section>
  <h2> No Match! </h2>
</section>

<aside>
  <h2> Match! </h2>
</aside>
*/

Visuelles Beispiel

Spezifität

Die Spezifität der :not-Pseudoklasse entspricht der Spezifität ihres Arguments. Die :not()-Pseudoklasse fügt der Selektorspezifität keine Punkte hinzu, im Gegensatz zu anderen Pseudoklassen. 

Negationen dürfen nicht verschachtelt werden, daher ist :not(:not(...)) niemals erlaubt. Autoren sollten auch beachten, dass Pseudo-Elemente nicht als einfacher Selektor gelten und daher nicht als Argument für :not(X) gültig sind. Seien Sie vorsichtig bei der Verwendung von Attributselektoren, da einige nicht so weit verbreitet unterstützt werden wie andere. Das Verketten von :not-Selektoren mit anderen :not-Selektoren ist zulässig.

Browser-Unterstützung

Die :not()-Pseudoklasse wurde in der CSS Selectors Level 4 Spezifikation aktualisiert, um eine Argumentliste zu erlauben. In CSS Selectors Level 3 konnte sie nur einen einzelnen einfachen Selektor akzeptieren. Daher ist die Browserunterstützung zwischen den Entwürfen von Level 3 und Level 4 etwas geteilt.

Einfache Selektoren

IE	Edge	Firefox	Chrome	Safari	Opera
9+	Alle	Alle	Alle	12.1+	Alle

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Alle	Alle	Alle	Alle	Alle

Selektorlisten

Weitere Informationen

• CSS Selectors Module Level 3
• CSS Selectors Level 4 Spezifikation

Verwandt