: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 verhindert, dass bestimmte Elemente ausgewählt werden, wird sie als Negations-Pseudoklasse bezeichnet.
Probieren Sie es aus
Die :not()
-Pseudoklasse kann einige Merkmale, Tricks und unerwartete Ergebnisse aufweisen, die Sie kennen sollten, bevor Sie sie verwenden.
Syntax
Die :not()
-Pseudoklasse benötigt als Argument eine Selektorenliste, eine kommagetrennte Liste von einem oder mehreren Selektoren. Die Liste darf keinen Pseudoelement enthalten, aber alle anderen einfachen, zusammengesetzten und komplexen Selektoren sind zulässig.
:not(<complex-selector-list>) {
/* ... */
}
Beschreibung
Es gibt einige 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 entspricht
:not(*)
jedem Element, das kein Element ist. Das ist offensichtlich Unsinn und die zugehörige Regel wird nie angewendet. - Diese Pseudoklasse kann die Spezifität einer Regel erhöhen. Zum Beispiel entspricht
#foo:not(#bar)
demselben Element wie das einfachere#foo
, hat jedoch die höhere Spezifität von zweiid
-Selektoren. - 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:not(:is(argument))
geschrieben worden wäre. :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 Nachfahr-Kombinatoren verwendet wird, da es mehrere Wege gibt, ein Zielelement auszuwählen. Beispielsweise wird
body :not(table) a
weiterhin auf Links innerhalb einer<table>
angewendet, da<tr>
,<tbody>
,<th>
,<td>
,<caption>
usw. den:not(table)
-Teil des Selektors erfüllen können. Um dies zu vermeiden, können Sie stattdessenbody a:not(table a)
verwenden, das nur auf Links angewendet wird, die keine Nachfahren 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 ist, wird die gesamte Regel ungültig. Ein effektiver Weg, dieses Verhalten zu umgehen, ist die Verwendung der:is()
-Pseudoklasse, die eine tolerante Selektorenliste akzeptiert. Zum Beispiel macht:not(.foo, :invalid-pseudo-class)
eine gesamte Regel ungültig, während:not(:is(.foo, :invalid-pseudo-class))
jedes Element (einschließlich<html>
und<body>
) auswählt, das nicht.foo
ist.
Beispiele
Verwendung von :not() mit gültigen Selektoren
Dieses Beispiel zeigt einige Anwendungsfälle 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ültigkeit 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 tolerante Selektorenliste, sodass die Regel :is(.foo, :invalid-pseudo-class)
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)
.
Wenn :invalid-pseudo-class
ein gültiger Selektor wäre, 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Negation pseudo-class selector ( :not() ) | ||||||||||||
Selector list argument |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
Siehe auch
-
Andere funktionale CSS-Pseudoklassen:
-
Wie :not() mehrere Selektoren verknüpft auf dem MDN Blog (2023)