: niet () - CSS-trucs

Anonim

De :not()eigenschap in CSS is een negatie-pseudoklasse en accepteert een eenvoudige selector of een selectorlijst als argument. Het komt overeen met een element dat niet wordt vertegenwoordigd door het argument. Het doorgegeven argument mag geen extra selectors of pseudo-element selectors bevatten.

De mogelijkheid om een ​​lijst met selectors als argument te gebruiken, wordt als experimenteel beschouwd, hoewel de ondersteuning op het moment van schrijven toeneemt, inclusief Safari (sinds 2015), Firefox (sinds december 2020) en Chrome (sinds januari 2021).

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

In dit voorbeeld hebben we een ongeordende lijst met een enkele klasse op de

  • ​ 
    

      

    •

    Onze CSS zou alle

  • elementen behalve degene (n) met een klasse van .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    U kunt hetzelfde doen met pseudoklassen die als een eenvoudige selector worden beschouwd.

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

    Als we echter een pseudo-elementenselector als ons argument gebruiken, zal dit niet het verwachte resultaat opleveren.

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

    Complexe kiezers

    /* select all

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

    Visueel voorbeeld

    Visuele weergave van de verschillende toepassingen van :not()

    Specificiteit

    De specificiteit van de :not pseudo-klasse is de specificiteit van zijn argument. De :not() pseudo-klasse draagt ​​niet bij aan de specificiteit van de selector, in tegenstelling tot andere pseudo-klassen.

    Ontkenningen mogen niet worden genest en zijn dus :not(:not(… )) nooit toegestaan. Auteurs moeten ook opmerken dat aangezien pseudo-elementen niet als een eenvoudige selector worden beschouwd, ze niet geldig zijn als argument voor :not(X). Let op bij het gebruik van attribuutkiezers, aangezien sommige niet algemeen worden ondersteund als andere. Het koppelen van :not selectors met andere :not selectors is toegestaan.

    Browser-ondersteuning

    De :not()pseudo-klasse is bijgewerkt in de CSS Selectors Level 4-specificatie om een ​​argumentlijst mogelijk te maken. In CSS Selectors Level 3 was het slechts in staat om een ​​enkele eenvoudige selector te accepteren. Als gevolg hiervan is de browserondersteuning enigszins verdeeld over de concepten van niveau 3 en niveau 4.

    Eenvoudige selectors

    D.W.Z Rand Firefox Chrome Safari Opera
    9+ Alle Alle Alle 12.1+ Alle
    Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
    Alle Alle Alle Alle Alle

    Selector lijsten

    Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

    Bureaublad

    Chrome Firefox D.W.Z Rand Safari
    88 84 Nee 88 9

    Mobiel / tablet

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

    Meer informatie

    • CSS Selectors Module Niveau 3
    • CSS Selectors Level 4-specificatie