: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 Pseudo-Klasse repräsentiert Elemente, die nicht mit einer Liste von Selektoren übereinstimmen. Da sie bestimmte Elemente von der Auswahl ausschließt, ist sie als Negations-Pseudo-Klasse 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() Pseudo-Klasse hat einige Eigenheiten, Tricks und unerwartete Ergebnisse, derer Sie sich bewusst sein sollten, bevor Sie sie verwenden.
Syntax
:not(<complex-selector-list>) {
/* ... */
}
Parameter
Die :not() Pseudo-Klasse 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 beachten sollten:
- Nutzlose Selektoren können mit dieser Pseudo-Klasse geschrieben werden. Zum Beispiel
:not(*)trifft auf jedes Element zu, das kein Element ist, was offensichtlich Unsinn ist, daher wird die zugehörige Regel niemals angewendet. - Diese Pseudo-Klasse kann die Spezifität einer Regel erhöhen. Zum Beispiel
#foo:not(#bar)trifft auf dasselbe Element zu wie das einfachere#foo, hat aber die höhere Spezifität von zweiidSelektoren. - Die Spezifität der
:not()Pseudo-Klasse wird durch die Spezifität des spezifischsten Selektors in ihrem durch Komma getrennten Argument von Selektoren ersetzt; wobei die gleiche Spezifität gegeben ist, als ob sie geschrieben worden wäre:not(:is(argument)). :not(.foo)trifft auf alles zu, was nicht.fooist, einschließlich<html>und<body>.- Dieser Selektor trifft auf alles zu, das "kein X" ist. Dies kann überraschend sein, wenn er mit Nachkommens-Kombinatoren verwendet wird, da es mehrere Pfade gibt, um ein Zielelement auszuwählen. Zum Beispiel gilt
body :not(table) adennoch für Links innerhalb einer<table>, 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 stattdessenbody a:not(table a)verwenden, was nur auf Links zutrifft, 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 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 Element (einschließlich<html>und<body>) treffen, 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 die 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 p:not(.foo, :invalid-pseudo-class) Regel ist ungültig, weil sie einen ungültigen Selektor enthält. Die :is() Pseudo-Klasse akzeptiert eine nachsichtige Selektorliste, daher ist die :is(.foo, :invalid-pseudo-class) Regel gültig und entspricht :is(.foo). Somit ist die p:not(:is(.foo, :invalid-pseudo-class)) Regel gültig und entspricht p:not(.foo).
Wenn :invalid-pseudo-class ein gültiger Selektor wäre, wären die ersten beiden Regeln oben immer noch äquivalent (die letzten beiden Regeln zeigen das). Der Einsatz von :is() macht die Regel robuster.
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # negation |
Browser-Kompatibilität
Loading…
Siehe auch
-
Andere funktionale CSS-Pseudo-Klassen:
-
Wie :not() mehrere Selektoren verbindet auf dem MDN Blog (2023)