W3docs
de
Anmelden

CSS :not() Pseudo-Klasse

Die :not() CSS-Pseudo-Klasse wählt Elemente aus, die nicht einer Liste von Selektoren entsprechen. Mehr dazu mit Beispielen.

Die CSS-Pseudo-Klasse :not() wählt jedes Element aus, das dem übergebenen Selektor nicht entspricht. Da sie eine Übereinstimmung umkehrt, wird sie auch als Negations-Pseudo-Klasse bezeichnet.

Diese Seite erklärt, was :not() macht, wann man sie einsetzen sollte, wie sie die Spezifität beeinflusst und welche Fallstricke es gibt — mit bearbeitbaren, ausführbaren Beispielen.

Was :not() ist

:not() ist eine funktionale Pseudo-Klasse: Sie nimmt einen Selektor als Argument und trifft jedes Element, das das Argument nicht auswählt. Unterstützte Argumente sind:

  • Typ-Selektor (z. B. p, span)
  • Klassen-Selektor (z. B. .element)
  • ID-Selektor (z. B. #header)
  • Pseudo-Klassen-Selektor (z. B. :last-child, :first-of-type)
  • Attribut-Selektor (z. B. [type="text"])
  • Der universelle Selektor (*)

In Selectors Level 3 musste das Argument ein einzelner einfacher Selektor sein. Selectors Level 4 hat dies erweitert, sodass eine kommagetrennte Liste sowie zusammengesetzte oder komplexe Selektoren akzeptiert werden. In modernen Browsern lässt sich daher :not(.a, .b) oder :not(ul li.first) schreiben.

Wann man es verwendet

Greife auf :not() zurück, wenn es kürzer ist, das zu Ausschließende zu beschreiben, als alles aufzulisten, was man einschließen möchte:

  • Jedes Listenelement außer dem letzten stylen: li:not(:last-child).
  • Jeden Link stylen, der nicht extern ist: a:not([target="_blank"]).
  • Abstände zwischen Geschwisterelementen ohne abschließende Margin hinzufügen: .item:not(:first-child) { margin-top: 1rem; }.
  • Styling für eine Variante deaktivieren: .btn:not(.btn-ghost) { background: #8ebf42; }.

Wichtige Hinweise

  • Der :not()-Selektor funktioniert mit Pseudo-Klassen, unterstützt aber keine Pseudo-Elemente.
  • Das Schlüsselwort :not() selbst fügt keine Spezifität hinzu — nur sein Argument. So hat :not(.foo) dieselbe Spezifität wie .foo (0, 1, 0), und ein einfaches :not(p) wiegt genauso viel wie p (0, 0, 1). Das macht :not() günstiger als eine äquivalente zusätzliche Klasse, was bei Überschreibungskonflikten überraschen kann.
  • :not(.foo) trifft alles, was nicht .foo ist, einschließlich <html> und <body>. Kombiniere es immer mit einem Kontext wie ul li:not(.foo), damit es nicht auf das gesamte Dokument ausufert.
  • Der :not()-Selektor gilt für jedes Element, das dem Argument nicht entspricht, nicht nur für ein einzelnes Element.
  • Ein leeres :not() — :not() ohne Inhalt — ist ungültig und die gesamte Regel wird ignoriert.

Version

Selectors Level 3

Selectors Level 4

Syntax

CSS :not() Syntax

selector:not(argument) {
  css declarations;
}

Beispiel der :not() Pseudo-Klasse:

CSS :not() Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #666;
      }
      :not(p) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text</p>
    <div>Lorem Ipsum is simply dummy text</div>
    <a href="https://www.w3docs.com" target="_blank">Link to W3docs</a>
  </body>
</html>
Probier es selbst »

Im folgenden Beispiel gibt es eine ungeordnete Liste mit einer einzelnen Klasse am <li>-Tag.

Beispiel der :not() Pseudo-Klasse mit dem <li>-Tag:

CSS :not() weiteres Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text-blue {
        color: blue;
      }
      ul li:not(.text-blue) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <ul>
      <li>List item 1</li>
      <li class="text-blue">List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Probier es selbst »

Eine Liste von Selektoren übergeben (Selectors Level 4)

Moderne Browser ermöglichen es, mehrere Selektoren auf einmal auszuschließen, indem sie durch Kommas innerhalb eines einzigen :not() getrennt werden. Die folgende Regel färbt jedes Listenelement außer dem gedämpften und dem aktiven:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        color: #8ebf42;
      }
      li:not(.muted, .active) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>:not() with a selector list</h2>
    <ul>
      <li>Highlighted item</li>
      <li class="muted">Muted item</li>
      <li class="active">Active item</li>
      <li>Highlighted item</li>
    </ul>
  </body>
</html>

Dies entspricht dem älteren, ausführlicheren li:not(.muted):not(.active), das verwendet werden kann, wenn sehr alte Browser unterstützt werden müssen.

Verwandte Selektoren

  • CSS Selectors — die vollständige Referenz der Selektor-Typen.
  • :first-child und :last-child — kombiniere diese mit :not() für Abstands-Tricks.
  • :nth-child() — eine weitere Möglichkeit, eine Teilmenge von Geschwisterelementen anzusprechen.

Übungen

Übung
Was macht die :not() Pseudo-Klasse in CSS?
Was macht die :not() Pseudo-Klasse in CSS?
Was this page helpful?