: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 einer Liste von Selektoren entsprechen. Da sie verhindert, dass bestimmte Elemente ausgewählt werden, ist sie als Negationspseudoklasse bekannt.
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 besitzt eine Reihe von Eigenheiten, Tricks und unerwarteten Ergebnissen, die Sie beachten sollten, bevor Sie sie verwenden.
Syntax
:not(<complex-selector-list>) {
/* ... */
}
Parameter
Die :not() Pseudoklasse erfordert eine Selector List, eine kommagetrennte Liste aus einem oder mehreren Selektoren, als Argument. Die Liste darf kein Pseudoelement 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 beachten sollten:
- Sinnlose Selektoren können mit dieser Pseudoklasse geschrieben werden. Zum Beispiel stimmt
:not(*)mit jedem Element überein, das kein Element ist, was offensichtlich Unsinn ist, daher wird die begleitende Regel nie angewendet. - Diese Pseudoklasse kann die Spezifität einer Regel erhöhen. Zum Beispiel stimmt
#foo:not(#bar)mit demselben Element überein wie das einfachere#foo, 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 kommagetrennten Argument von Selektoren ersetzt; sie bietet dieselbe Spezifität, als ob sie als:not(:is(argument))geschrieben worden wäre. :not(.foo)wird alles abgleichen, was nicht.fooist, einschließlich<html>und<body>.- Dieser Selektor wird alles abgleichen, was "kein X" ist. Dies kann beim Einsatz mit Nachkommenkombinatoren überraschend sein, da es mehrere Pfade gibt, um ein Ziel-Element auszuwählen. Beispielsweise wird
body :not(table) adennoch auf Links innerhalb einer<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 Sie stattdessenbody a:not(table a)verwenden, was nur auf Links angewendet wird, die keine Nachkommen einer Tabelle sind. - Sie können mehrere Selektoren gleichzeitig negieren. Beispiel:
:not(.foo, .bar)ist äquivalent zu:not(.foo):not(.bar). - Wenn ein beliebiger Selektor, der an die
:not()Pseudoklasse übergeben wird, ungültig oder vom Browser nicht unterstützt wird, wird die gesamte Regel ungültig. Der effektive Weg, dieses Verhalten zu überwinden, besteht darin, die:is()Pseudoklasse zu verwenden, welche eine verzeihende Selektorliste akzeptiert. Zum Beispiel wird:not(.foo, :invalid-pseudo-class)eine ganze Regel ungültig machen, aber:not(:is(.foo, :invalid-pseudo-class))wird mit jedem Element übereinstimmen, das nicht.fooist (einschließlich<html>und<body>).
Beispiele
Verwendung von :not() mit gültigen Selektoren
Dieses Beispiel zeigt einige Beispiele für die 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 verzeihende Selektorliste, daher ist die :is(.foo, :invalid-pseudo-class) Regel gültig und äquivalent zu :is(.foo). Somit ist die Regel p:not(:is(.foo, :invalid-pseudo-class)) gültig und äquivalent zu p:not(.foo).
Wenn :invalid-pseudo-class ein gültiger Selektor wäre, wären die ersten beiden obigen Regeln immer noch äquivalent (wie durch die beiden letzten Regeln gezeigt). Die Verwendung von :is() macht die Regel robuster.
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # negation |
Browser-Kompatibilität
Loading…
Siehe auch
-
Andere funktionale CSS-Pseudoklassen:
-
Wie :not() mehrere Selektoren verknüpft auf dem MDN-Blog (2023)