: not () - CSS-хитрощі

Зміст

: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 Край 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 Selectors Level 4

    • Цікаві статті...