:not()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die :not() CSS Pseudoklasse repräsentiert Elemente, die nicht mit einer Liste von Selektoren übereinstimmen. Da sie verhindert, dass bestimmte Elemente ausgewählt werden, wird sie als Negations-Pseudoklasse 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() Pseudoklasse weist einige Eigenheiten, Tricks und unerwartete Ergebnisse auf, die Sie kennen sollten, bevor Sie sie verwenden.
Syntax
:not(<complex-selector-list>) { /* ... */ } Parameter
Die :not() Pseudoklasse erfordert eine Selektor-Liste, eine durch Kommas getrennte Liste von einem oder mehreren Selektoren, als Argument. Die Liste darf kein Pseudo-Element enthalten, aber alle anderen einfachen, zusammengesetzten und komplexen Selektoren sind erlaubt.
Beschreibung
Es gibt mehrere ungewöhnliche Effekte und Ergebnisse bei der Verwendung von :not(), die Sie berücksichtigen sollten:
- Nutztlose Selektoren können mit dieser Pseudoklasse geschrieben werden. Zum Beispiel,
:not(*)entspricht jedem Element, das kein Element ist, was offensichtlich Unsinn ist, so dass die begleitende Regel niemals angewendet wird. - Diese Pseudoklasse kann die Spezifität einer Regel erhöhen. Zum Beispiel,
#foo:not(#bar)wird dasselbe Element wie das einfachere#fooauswählen, hat aber die höhere Spezifität von zweiidSelektoren. - Die Spezifität der
:not()Pseudoklasse wird durch die Spezifität des spezifischsten Selektors in ihrem durch Kommas getrennten Argument an Selektoren ersetzt; sie bietet dieselbe Spezifität, als ob sie geschrieben worden wäre:not(:is(argument)). :not(.foo)wird alles auswählen, was nicht.fooist, einschließlich<html>und<body>.- Dieser Selektor wird alles auswählen, was "nicht ein X" ist. Dies kann überraschend sein, wenn verwendet mit Nachfahr-Kombinatoren, da es mehrere Wege gibt, ein Ziel-Element zu selektieren. Zum Beispiel,
body :not(table) awird dennoch auf Links innerhalb eines<table>angewendet, da<tr>,<tbody>,<th>,<td>,<caption>, usw. alle mit dem:not(table)Teil des Selektors übereinstimmen können. Um dies zu vermeiden, können Siebody a:not(table a)verwenden, was nur auf Links angewendet wird, die keine Nachkommen eines Tisches sind. - Sie können mehrere Selektoren gleichzeitig negieren. Beispiel:
:not(.foo, .bar)ist gleichbedeutend mit:not(.foo):not(.bar). - Wenn ein an die
:not()Pseudoklasse übergebener Selektor ungültig oder vom Browser nicht unterstützt wird, wird die ganze Regel ungültig. Der wirksame Weg, dieses Verhalten zu überwinden, ist die Verwendung der:is()Pseudoklasse, die eine nachsichtige Selektorliste akzeptiert. Zum Beispiel,:not(.foo, :invalid-pseudo-class)wird 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.fooist.
Beispiele
Verwendung von :not() mit gültigen Selektoren
Dieses Beispiel zeigt einige Möglichkeiten der Verwendung von :not().
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
.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ültigmachung verhindert.
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
/* 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, da sie einen ungültigen Selektor enthält. Die :is() Pseudoklasse akzeptiert eine nachsichtige Selektorliste, so dass die Regel :is(.foo, :invalid-pseudo-class) gültig und gleichwertig zu :is(.foo) ist. Somit ist die Regel p:not(:is(.foo, :invalid-pseudo-class)) gültig und entspricht p:not(.foo).
Wenn :invalid-pseudo-class ein gültiger Selektor wäre, wären die ersten beiden Regeln oben trotzdem gleichwertig (die letzten beiden Regeln zeigen dies). Die Verwendung von :is() macht die Regel robuster.
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # negation |
Browser-Kompatibilität
Siehe auch
-
Andere funktionale CSS Pseudoklassen:
-
Wie :not() mehrere Selektoren verknüpft auf dem MDN-Blog (2023)