: ne () - Triky CSS

Anonim

:not()Nemovitost v CSS je negací pseudo class a přijímá jednoduchý volič nebo seznam voliče jako argument. Odpovídá prvku, který není reprezentován argumentem. Předaný argument nemusí obsahovat další selektory ani selektory pseudoprvků.

Schopnost používat seznam selektorů jako argument je považována za experimentální, i když v době psaní tohoto článku jeho podpora roste, včetně Safari (od roku 2015), Firefox (od prosince 2020) a Chrome (od ledna 2021).

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

V tomto příkladu máme neuspořádaný seznam s jedinou třídou na

  • : 
    

      

    •

    Náš CSS by vybral všechny

  • prvky kromě těch s třídou .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Totéž můžete udělat pomocí pseudo tříd, které jsou považovány za jednoduchý selektor.

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

    Pokud však jako argument použijeme selektor pseudoprvků, nepřinese očekávaný výsledek.

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

    Složité selektory

    /* select all

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

    Vizuální příklad

    Vizuální znázornění rozmanitého použití :not()

    Specifičnost

    Specifičnost :not pseudotřídy je specifičnost jejího argumentu. :not() Pseudo-class nepřidá na voliče specifičnosti, na rozdíl od jiných pseudotříd.

    Negace nemusí být vnořeny, takže to :not(:not(… )) není nikdy povoleno. Autoři by si měli také uvědomit, že jelikož pseudoelementy nejsou považovány za jednoduchý selektor, nejsou platné jako argument :not(X). Při použití selektorů atributů buďte opatrní, protože některé nejsou široce podporovány jako jiné. Řetězení :not selektorů s jinými :not selektory je přípustné.

    Podpora prohlížeče

    Třída :not()pseudo byla aktualizována ve specifikaci úrovně CSS Selectors úrovně 4, aby umožňovala seznam argumentů. V CSS Selectors Level 3 byl schopen přijmout pouze jeden jednoduchý selektor. Výsledkem je, že podpora prohlížeče je trochu rozdělena mezi koncepty úrovně 3 a úrovně 4.

    Jednoduché selektory

    TJ Okraj Firefox Chrome Safari Opera
    9+ Všechno Všechno Všechno 12,1+ Všechno
    Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mobile
    Všechno Všechno Všechno Všechno Všechno

    Seznamy voličů

    Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

    plocha počítače

    Chrome Firefox TJ Okraj Safari
    88 84 Ne 88 9

    Mobilní / Tablet

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

    Více informací

    • Úroveň 3 modulu pro výběr CSS
    • Specifikace úrovně CSS Selectors úrovně 4