: not () - CSS-Tricks

Anonim

Die :not()Eigenschaft in CSS ist eine Negationspseudoklasse und akzeptiert einen einfachen Selektor oder eine Selektorliste als Argument. Es entspricht einem Element, das nicht durch das Argument dargestellt wird. Das übergebene Argument darf keine zusätzlichen Selektoren oder Pseudoelement-Selektoren enthalten.

Die Möglichkeit, eine Liste von Selektoren als Argument zu verwenden, wird als experimentell angesehen, obwohl ihre Unterstützung zum Zeitpunkt dieses Schreibens zunimmt, einschließlich Safari (seit 2015), Firefox (seit Dezember 2020) und Chrome (seit Januar 2021).

/* the X argument can be replaced with any simple selectors */ :not(X) ( property: value; )

In diesem Beispiel haben wir eine ungeordnete Liste mit einer einzelnen Klasse auf der

  • :: 
    

      

    •

    Unser CSS würde alle auswählen

  • Elemente mit Ausnahme derjenigen mit einer Klasse von .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Sie können dies auch mit Pseudoklassen tun, die als einfacher Selektor betrachtet werden.

    p:not(:nth-child(2n+1)) ( font-size: 3em; )

    Wenn wir jedoch einen Pseudoelement-Selektor als Argument verwenden, wird nicht das erwartete Ergebnis erzielt.

    :not(::first-line) ( /* ::first-line is a pseudo element selector and not a simple selector */ color: white; )

    Komplexe Selektoren

    /* select all

    s that are not descendants of */ p:not(article *) ( )

    Visuelles Beispiel

    Visuelle Darstellung der vielfältigen Einsatzmöglichkeiten von :not()

    Spezifität

    Die Spezifität der :not Pseudoklasse ist die Spezifität ihres Arguments. Die :not() Pseudoklasse erhöht im Gegensatz zu anderen Pseudoklassen nicht die Selektorspezifität.

    Negationen dürfen nicht verschachtelt werden und sind daher :not(:not(… )) niemals zulässig. Autoren sollten auch beachten, dass Pseudoelemente, da sie nicht als einfacher Selektor betrachtet werden, nicht als Argument für gültig sind :not(X). Seien Sie vorsichtig, wenn Sie Attributselektoren verwenden, da einige als andere nicht allgemein unterstützt werden. Das Verketten von :not Selektoren mit anderen :not Selektoren ist zulässig.

    Browser-Unterstützung

    Die :not()Pseudoklasse wurde in der CSS Selectors Level 4-Spezifikation aktualisiert, um eine Argumentliste zu ermöglichen. In CSS Selectors Level 3 konnte nur ein einziger einfacher Selektor akzeptiert werden. Infolgedessen ist die Browserunterstützung zwischen den Entwürfen der Stufen 3 und 4 etwas aufgeteilt.

    Einfache Selektoren

    IE Kante Feuerfuchs Chrom Safari Oper
    9+ Alle Alle Alle 12.1+ Alle
    Android Chrome Android Firefox Android Browser iOS Safari Opera Mobile
    Alle Alle Alle Alle Alle

    Auswahllisten

    Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

    Desktop

    Chrom Feuerfuchs IE Kante Safari
    88 84 Nein 88 9

    Handy / Tablet

    Android Chrome Android Firefox Android iOS Safari
    88 85 81 9.0-9.2

    Mehr Informationen

    • CSS Selectors Module Level 3
    • CSS Selectors Level 4 Spezifikation