: не () - 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()Псевдо - класс был обновлен в CSS селекторы Level 4 спецификации , чтобы список аргументов. В CSS Selectors Level 3 он мог принимать только один простой селектор. В результате поддержка браузером немного разделена между черновиками Уровня 3 и Уровня 4.

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

    IE Край Fire Fox Хром Сафари Опера
    9+ Все Все Все 12.1+ Все
    Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
    Все Все Все Все Все

    Списки выбора

    Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

    Рабочий стол

    Хром Fire Fox IE Край Сафари
    88 84 Нет 88 9

    Мобильный / планшет

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

    Дополнительная информация

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