: нот () - ЦСС-трикови

Anonim

:not()Имовина у ЦСС је негација псеудо-класе и прихвата једноставан селектор или листу за избор као аргумент. Поклапа се са елементом који није представљен аргументом. Прослеђени аргумент не сме садржавати додатне селекторе или било које селекторе псеудо-елемената.

Способност коришћења листе селектора као аргумента сматра се експерименталном, иако подржана расте у време овог писања, укључујући Сафари (од 2015), Фирефок (од децембра 2020) и Цхроме (од јануара 2021).

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

У овом примеру имамо неуређену листу са једном класом на

  • : 
    

      

    •

    Наш ЦСС би изабрао све

  • елементи осим оног (а) са класом од .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    То бисте такође могли учинити користећи псеудо класе које се сматрају једноставним селектором.

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

    Међутим, ако као аргумент користимо селектор псеудо елемената, то неће дати очекивани резултат.

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

    Сложени селектори

    /* select all

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

    Визуелни пример

    Визуелни приказ различитих употреба :not()

    Специфичност

    Специфичност :not псеудо-класе је специфичност њеног аргумента. :not() Псеудо-класа не додате у селектора специфичност, за разлику од других псеудо-класе.

    Негације можда неће бити угнежђене, па :not(:not(… )) никада није дозвољено. Аутори такође треба да примете да, будући да се псеудо-елементи не сматрају једноставним селектором, они нису валидни као аргумент за :not(X). Будите пажљиви када користите селекторе атрибута јер неки нису широко подржани као други. Повезивање :not селектора са другим :not селекторима је дозвољено.

    Подршка прегледача

    :not()Псеудо класа је ажуриран у ЦСС селецторс ниво 4 спецификацији да би се списак аргумент. У ЦСС Селецторс Левел 3 био је способан да прихвати само један једноставан селектор. Као резултат, подршка за прегледаче је мало подељена између нацрта нивоа 3 и нивоа 4.

    Једноставни селектори

    ИЕ Ивица Фирефок Хром Сафари Опера
    9+ Све Све Све 12.1+ Све
    Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари Опера Мобиле
    Све Све Све Све Све

    Селекторске листе

    Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

    Десктоп

    Хром Фирефок ИЕ Ивица Сафари
    88 84 Не 88 9

    Мобиле / Таблет

    Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
    88 85 81 9.0-9.2

    Више информација

    • Модул ЦСС селектора ниво 3
    • Спецификација ЦСС селектора нивоа 4