Описание
Отрицательный CSS псевдо-класс, :not(X) - функция, принимающая простой селектор X в качестве аргумента. Он находит элементы, не соответствующие селектору. X не должен содержать других отрицательных селекторов.
Замечания:
- С этого псевдокласса можно написать бесполезные селекторы. Например,
:not(*)найдёт любой элемент, являющийся не любым, то есть правило не применится ни к одному элементу. - Возможно переписать другие правила. Например
foo:not(bar)найдёт тот же элемент, что и простойfoo. Тем не менее специфичность первого выше. :not(foo){}найдёт что угодно, что неfoo, включая<html>и<body>.- Это селектор применяется только к одному элементу. Вы не можете использовать его, чтобы исключить всех родителей. Например,
body :not(table) aприменится к ссылкам внутри таблицы, тогда как<tr>будет соответствовать:not()части селектора.
Синтаксис
:not(selector) { style properties }
Пример
p:not(.classy) { color: red; }
body :not(p) { color: green; }
CSS выше и HTML ниже...
<p>Некоторый текст.</p> <p class="classy">Какой-то другой текст.</p> <span>Ещё текст<span>
Выведет это:
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| Selectors Level 4 Определение ':not()' в этой спецификации. |
Рабочий черновик | Аргумент расширен до поддержки нескольких непростых селекторов. |
| Selectors Level 3 Определение ':not()' в этой спецификации. |
Рекомендация | Изначальное определение. |
Поддержка браузерами
| Возможность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Базовая поддержка | 1.0 | 1.0 (1.7 или ранее) | 9.0 | 9.5 | 3.2 |
| Расширенные аргументы | Нет | Нет | Нет | Нет | Нет |
| Возможность | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Базовая поддержка | 2.1 | 1.0 (1) | 9.0 | 10.0 | 3.2 |
| Расширенные аргументы | Нет | Нет | Нет | Нет | Нет |