:not()

Baseline Widely available

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

Die :not() CSS Pseudoklasse repräsentiert Elemente, die nicht mit einer Liste von Selektoren übereinstimmen. Da sie spezifische Elemente davon abhält, ausgewählt zu werden, ist sie als Negations-Pseudoklasse bekannt.

Probieren Sie es aus

Die :not()-Pseudoklasse hat eine Reihe von Eigenheiten, Tricks und unerwarteten Ergebnissen, die Sie sich bewusst machen sollten, bevor Sie sie verwenden.

Syntax

Die :not()-Pseudoklasse benötigt eine Selektorliste, eine durch Kommas getrennte Liste von einem oder mehreren Selektoren, als Argument. Die Liste darf kein Pseudoelement enthalten, aber alle anderen einfachen, zusammengesetzten und komplexen Selektoren sind erlaubt.

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

Beschreibung

Es gibt einige ungewöhnliche Effekte und Ergebnisse bei der Verwendung von :not(), die Sie im Hinterkopf behalten sollten:

  • Sinnlose Selektoren können mit dieser Pseudoklasse geschrieben werden. Zum Beispiel entspricht :not(*) jedem Element, das kein Element ist, was offensichtlich Unsinn ist, sodass die begleitende Regel niemals angewendet wird.
  • Diese Pseudoklasse kann die Spezifität einer Regel erhöhen. Beispielsweise wird #foo:not(#bar) dasselbe Element wie das einfachere #foo auswählen, hat aber die höhere Spezifität von zwei id-Selektoren.
  • Die Spezifität der :not()-Pseudoklasse wird durch die Spezifität des spezifischsten Selektors in ihrem durch Kommas getrennten Argument von Selektoren ersetzt; bietet dieselbe Spezifität, als wäre sie geschrieben worden als :not(:is(argument)).
  • :not(.foo) wird alles auswählen, 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 Nachkommenkombinatoren verwendet wird, da es mehrere Wege gibt, ein Zielelement auszuwählen. Beispielsweise wird body :not(table) a weiterhin auf Links innerhalb eines <table> angewendet, da <tr>, <tbody>, <th>, <td>, <caption>, usw. alle den :not(table)-Teil des Selektors erfüllen können. Um dies zu vermeiden, können Sie stattdessen body a:not(table a) verwenden, das nur auf Links angewendet wird, die keine Nachkommen eines Tables sind.
  • Sie können mehrere Selektoren gleichzeitig negieren. Beispiel: :not(.foo, .bar) ist äquivalent zu :not(.foo):not(.bar).
  • Wenn ein Selektor, der an die :not()-Pseudoklasse übergeben wird, ungültig oder vom Browser nicht unterstützt wird, wird die gesamte Regel ungültig gemacht. Der effektive Weg, um dieses Verhalten zu überwinden, ist die Verwendung der [:is()]-Pseudoklasse, die eine fehlertolerante Selektorliste akzeptiert. Zum Beispiel wird :not(.foo, :invalid-pseudo-class) eine ganze Regel ungültig machen, aber :not(:is(.foo, :invalid-pseudo-class)) wird auf jedes (einschließlich <html> und <body>) Element angewendet, das nicht .foo ist.

Beispiele

Verwendung von :not() mit gültigen Selektoren

Dieses Beispiel zeigt einige Beispiele der 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 eine Ungültigsetzung 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()-Pseudoklasse akzeptiert eine fehlertolerante Selektorliste, sodass die :is(.foo, :invalid-pseudo-class)-Regel gültig und äquivalent zu :is(.foo) ist. Daher ist die Regel p:not(:is(.foo, :invalid-pseudo-class)) gültig und äquivalent zu p:not(.foo).

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

Spezifikationen

Specification
Selectors Level 4
# negation

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch