:not()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :not() CSS Pseudo-Klasse repräsentiert Elemente, die mit einer Liste von Selektoren nicht übereinstimmen. Da sie verhindert, dass bestimmte Elemente ausgewählt werden, wird sie als Negations-Pseudo-Klasse bezeichnet.

Probieren Sie es aus

p:not(.irrelevant) {
  font-weight: bold;
}

p > strong,
p > b.important {
  color: crimson;
}

p > :not(strong, b.important) {
  color: darkmagenta;
}

<p>
  <b>Mars</b> is one of the most Earth-like planets. <b>Mars</b> day is almost
  the same as an Earth day, only <strong>37 minutes</strong> longer.
</p>

<p class="irrelevant">
  <b class="important">NASA</b>'s Jet <del>Momentum</del> Propulsion Laboratory
  is designing mission concepts to survive the <b>Venus</b> extreme temperatures
  and atmospheric pressure.
</p>

Die :not()-Pseudo-Klasse hat eine Reihe von Besonderheiten, Tricks und unerwarteten Ergebnissen, die Sie beachten sollten, bevor Sie sie verwenden.

Syntax

css
:not(<complex-selector-list>) {
  /* ... */
}

Parameter

Die :not()-Pseudo-Klasse erfordert eine Selektorliste, eine kommagetrennte Liste von einem oder mehreren Selektoren, als Argument. Die Liste darf keine Pseudo-Elemente enthalten, aber alle anderen einfachen, zusammengesetzten und komplexen Selektoren sind erlaubt.

Beschreibung

Es gibt einige ungewöhnliche Effekte und Ergebnisse bei der Verwendung von :not(), die Sie berücksichtigen sollten:

  • Sinnlose Selektoren können mit dieser Pseudo-Klasse geschrieben werden. Zum Beispiel entspricht :not(*) jedem Element, das kein Element ist, was offensichtlich Unsinn ist, sodass die begleitende Regel niemals angewendet wird.
  • Diese Pseudo-Klasse kann die Spezifität einer Regel erhöhen. Zum Beispiel passt #foo:not(#bar) auf dasselbe Element wie das einfachere #foo, hat aber die höhere Spezifität von zwei id-Selektoren.
  • Die Spezifität der :not()-Pseudo-Klasse wird durch die Spezifität des spezifischsten Selektors in ihrem kommagetrennten Argument von Selektoren ersetzt; und bietet dieselbe Spezifität, als ob es geschrieben worden wäre :not(:is(argument)).
  • :not(.foo) wird auf alles zutreffen, was nicht .foo ist, einschließlich <html> und <body>.
  • Dieser Selektor wird alles auswählen, das "kein X" ist. Dies kann überraschend sein, wenn er mit Nachfahrenkombinatoren verwendet wird, da es mehrere Pfade gibt, um ein Ziel-Element auszuwählen. Zum Beispiel wird body :not(table) a weiterhin auf Links innerhalb eines <table> angewendet, da <tr>, <tbody>, <th>, <td>, <caption>, etc. alle zum :not(table) Teil des Selektors passen können. Um dies zu vermeiden, können Sie body a:not(table a) verwenden, das nur auf Links angewendet wird, die keine Nachkommen einer Tabelle sind.
  • Sie können mehrere Selektoren gleichzeitig negieren. Beispiel: :not(.foo, .bar) ist gleichwertig zu :not(.foo):not(.bar).
  • Wenn ein beliebiger Selektor, der an die :not()-Pseudo-Klasse übergeben wird, ungültig oder vom Browser nicht unterstützt ist, wird die gesamte Regel ungültig. Der effektive Weg, dieses Verhalten zu überwinden, ist die Verwendung der :is()-Pseudo-Klasse, die eine nachsichtige Selektorliste akzeptiert. Zum Beispiel wird :not(.foo, :invalid-pseudo-class) eine ganze Regel ungültig machen, aber :not(:is(.foo, :invalid-pseudo-class)) wird jedes (einschließlich <html> und <body>) Element auswählen, das nicht .foo ist.

Beispiele

Verwendung von :not() mit gültigen Selektoren

Dieses Beispiel zeigt einige Beispiele für die Verwendung von :not().

HTML

html
<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
<h2>
  <span class="foo">foo inside h2</span>
  <span class="bar">bar inside h2</span>
</h2>

CSS

css
.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* <p> elements that don't have a class `.fancy` */
p:not(.fancy) {
  color: green;
}

/* Elements that are not <p> elements */
body :not(p) {
  text-decoration: underline;
}

/* Elements that are not <div>s or `.fancy` */
body :not(div):not(.fancy) {
  font-weight: bold;
}

/* Elements that are not <div>s or `.fancy` */
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* Elements inside an <h2> that aren't a <span> with a class of `.foo` */
h2 :not(span.foo) {
  color: red;
}

Ergebnis

Verwendung von :not() mit ungültigen Selektoren

Dieses Beispiel zeigt die Verwendung von :not() mit ungültigen Selektoren und wie man Invalidationen verhindert.

HTML

html
<p class="foo">I am a paragraph with .foo</p>
<p class="bar">I am a paragraph with .bar</p>
<div>I am a div without a class</div>
<div class="foo">I am a div with .foo</div>
<div class="bar">I am a div with .bar</div>
<div class="foo bar">I am a div with .foo and .bar</div>

CSS

css
/* Invalid rule, does nothing */
p:not(.foo, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

/* Select all <p> elements without the `foo` class */
p:not(:is(.foo, :invalid-pseudo-class)) {
  color: green;
  border-top: dotted thin currentcolor;
}

/* Select all <div> elements without the `foo` or the `bar` class */
div:not(.foo, .bar) {
  color: red;
  font-style: italic;
}

/* Select all <div> elements without the `foo` or the `bar` class */
div:not(:is(.foo, .bar)) {
  border-bottom: dotted thin currentcolor;
}

Ergebnis

Die Regel p:not(.foo, :invalid-pseudo-class) ist ungültig, weil sie einen ungültigen Selektor enthält. Die :is()-Pseudo-Klasse akzeptiert eine nachsichtige Selektorliste, sodass die :is(.foo, :invalid-pseudo-class)-Regel gültig und gleichwertig zu :is(.foo) ist. Somit ist die Regel p:not(:is(.foo, :invalid-pseudo-class)) gültig und gleichwertig zu p:not(.foo).

Wenn :invalid-pseudo-class ein gültiger Selektor wäre, wären die ersten beiden Regeln oben immer noch gleichwertig (die letzten beiden Regeln zeigen das). Die Verwendung von :is() macht die Regel robuster.

Spezifikationen

Specification
Selectors Level 4
# negation

Browser-Kompatibilität

Siehe auch