: не () - CSS-трикове

Anonim

В :not()имота в CSS е отрицание псевдо класа и приема прост селектор или списък селектор като аргумент. Той съответства на елемент, който не е представен от аргумента. Предаденият аргумент не може да съдържа допълнителни селектори или селектори на псевдоелементи.

Възможността да се използва списък от селектори като аргумент се счита за експериментална, въпреки че поддържаната от нея нараства по време на настоящото писане, включително Safari (от 2015 г.), Firefox (от декември 2020 г.) и Chrome (от януари 2021 г.).

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

В този пример имаме неподреден списък с един клас на

  • : 
    

      

    •

    Нашият CSS ще избере всички

  • елементи с изключение на този (ите) с клас .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 спецификацията на CSS селектори за да позволи списък от аргументи. В CSS селектори ниво 3 той можеше да приеме само един прост селектор. В резултат на това поддръжката на браузъра е малко разделена между черновите на ниво 3 и ниво 4.

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

    IE Ръб, край Firefox Chrome Сафари Опера
    9+ всичко всичко всичко 12.1+ всичко
    Android Chrome Android Firefox Браузър за Android iOS Safari Opera Mobile
    всичко всичко всичко всичко всичко

    Селекторни списъци

    Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

    работен плот

    Chrome Firefox IE Ръб, край Сафари
    88 84 Не 88 9

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

    Android Chrome Android Firefox Android iOS Safari
    88 85 81 9,0-9,2

    Повече информация

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