CSS :not()-Pseudoklasse

Die :not()-Pseudoklasse repräsentiert Elemente, die nicht mit einer Liste von Selektoren übereinstimmen.

Sie ist auch als Negations-Pseudoklasse bekannt. Es handelt sich um einen funktionalen Pseudoklassen-Selektor, der eine Selektorliste als Argument übernimmt und jedes Element matcht, das nicht mit diesem Argument übereinstimmt. In Selectors Level 3 werden nur einfache Selektoren akzeptiert. Selectors Level 4 erlaubt zusammengesetzte oder komplexe Selektoren. Unterstützte Argumente sind:

Typselektor (z. B. p, span)
Klassenselektor (z. B. .element)
ID-Selektor (z. B. #header)
Pseudoklassen-Selektor (z. B. :last-child, :first-of-type)
Attributselektor (z. B. [type="text"])
Der Universal-Selektor (*)

Wichtige Hinweise

Der :not()-Selektor funktioniert mit Pseudoklassen, unterstützt jedoch keine Pseudo-Elemente.
Die Spezifität von :not() wird durch den spezifischsten Selektor in seinem Argument bestimmt. Beispiel: :not(.foo) hat die gleiche Spezifität wie .foo (0, 1, 0).
:not(.foo) matcht alles, was kein .foo ist, einschließlich <html> und <body>.
Der :not()-Selektor gilt für jedes Element, das nicht mit dem Argument übereinstimmt, und nicht nur für ein einzelnes Element.

Version

Selectors Level 3

Selectors Level 4

Syntax

CSS :not()-Syntax

css

selector:not(argument) {
  css declarations;
}

Beispiel für die :not()-Pseudoklasse:

CSS :not()-Codebeispiel

html

<!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>

Try it Yourself »

Im folgenden Beispiel gibt es eine ungeordnete Liste, bei der das <li>-Tag eine einzelne Klasse besitzt.

Beispiel für die :not()-Pseudoklasse mit dem `<li>`-Tag:

CSS :not()-Codebeispiel 2

html

<!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>

Try it Yourself »

Praxis

Welche Funktion hat die :not-Pseudoklasse in CSS?

Sie repräsentiert ein Element, das nicht durch ihr Argument dargestellt wirdSie wird verwendet, um ein bestimmtes Attribut für ein Element festzulegenSie wählt jedes einzelne Element aus, das nicht das angegebene Element istSie ist das Gegenteil der :has-Pseudoklasse

CSS :not()-Pseudoklasse ​

Wichtige Hinweise ​

Version ​

Syntax ​

Beispiel für die :not()-Pseudoklasse: ​

Beispiel für die :not()-Pseudoklasse mit dem <li>-Tag: ​