:not()
Псевдоклас CSS :not()
("не") представляє елементи, котрі не відповідають заданому спискові селекторів. Оскільки він запобігає вибору певних елементів, його звуть псевдокласом заперечення.
Спробуйте його в дії
Псевдоклас :not()
приносить низку неочікуваних вивертів, хитрощів та неочікуваних результатів, про котрі слід знати перед його використанням.
Синтаксис
Псевдоклас :not()
потребує як аргумент список селекторів — розділений комами список з одного чи більше селекторів. Цей список не повинен містити іще одного селектора заперечення та псевдоелементів, проте всі інші прості, складені та складні селектори дозволені.
:not( <complex-selector-list> )
Опис
Є декілька незвичних ефектів та наслідків використання :not()
, котрі слід мати на увазі при його використанні:
- За допомогою цього псевдокласу можна написати безглуздий селектор. Наприклад,
:not(*)
, дає збіг з усіма елементами, котрі не є елементами, що очевидно є безглуздям, тож відповідні правила ніколи не будуть застосовані. - Цей псевдоклас може збільшити специфічність правила. Наприклад,
#foo:not(#bar)
дасть збіг з тим же елементом, що і#foo
, але матиме вищу специфічність у зв'язку з двома селекторамиid
. - Специфічність псевдокласу
:not()
замінюється специфічністю найспецифічнішого селектора в розділеному комами аргументі псевдокласу; в результаті виходить така ж специфічність, як якби це було записано:not(:is(argument))
. :not(.foo)
дасть збіг з усім, що не є.foo
, включно з<html>
і<body>
.- Цей селектор дасть збіг з усім, що "не є X". Це може бути неочікуваним при використанні комбінатора нащадків, оскільки є декілька шляхів для вибору цільового елемента. Наприклад,
body :not(table) a
все одно застосується до посилань всередині<table>
, оскільки<tr>
,<tbody>
,<th>
,<td>
,<caption>
тощо є збігом для частини селектора:not(table)
. Щоб цього уникнути, можна натомість скористатисяbody a:not(table a)
, який буде застосовуватися лише до посилань, що не є нащадками таблиць. - Можна заперечувати декілька селекторів водночас. Наприклад:
:not(.foo, .bar)
– рівносильно:not(.foo):not(.bar)
. - Якщо будь-який з селекторів, переданих у псевдоклас
:not()
, є недійсним або не підтримується браузером, то недійсним стане все правило. Дієвий спосіб обійти цю логіку – використовувати псевдоклас:is()
, котрий приймає поблажливий список селекторів. Наприклад,:not(.foo, :invalid-pseudo-class)
зробить недійсним усе правило, натомість:not(:is(.foo, :invalid-pseudo-class))
дасть збіг з будь-яким елементом (включно з<html>
і<body>
), котрий не є.foo
.
Приклади
Використання :not() на дійсних селекторах
Цей приклад демонструє кілька простих випадків застосування :not()
.
HTML
<p>Я – абзац.</p>
<p class="fancy">Я такий дуже файний!</p>
<div>Я – НЕ абзац.</div>
<h2>
<span class="foo">foo всередині h2</span>
<span class="bar">bar всередині h2</span>
</h2>
CSS
.fancy {
text-shadow: 2px 2px 3px gold;
}
/* Елементи <p>, котрі не мають класу `.fancy` */
p:not(.fancy) {
color: green;
}
/* Елементи, котрі не є елементами <p> */
body :not(p) {
text-decoration: underline;
}
/* Елементи, котрі не є ані <div>, ані `.fancy` */
body :not(div):not(.fancy) {
font-weight: bold;
}
/* Елементи, котрі не є ані <div>, ані `.fancy` */
body :not(div, .fancy) {
text-decoration: overline underline;
}
/* Елементи всередині <h2>, котрі не є <span> з класом `.foo` */
h2 :not(span.foo) {
color: red;
}
Результат
Використання :not() на недійсних селекторах
Цей приклад демонструє використання :not()
з недійсними селекторами та те, як запобігти нечинності всього селектора.
HTML
<div>Я – div</div>
<p class="foo">Я – абзац із .foo</p>
<p class="bar">Я – абзац із .bar</p>
CSS
/* Недійсне правило, нічого не робить */
:not(.foo, :invalid-pseudo-class) {
color: red;
font-style: italic;
}
/* Вибрати всі елементи без класу `foo`, що може включати елементи <html> і <body> */
:is(:not(.foo), :not(:invalid-pseudo-class)) {
text-decoration: underline;
}
/* Вибрати всі елементи <p> без класу `foo` */
p:is(:not(.foo), :not(:invalid-pseudo-class)) {
color: green;
border-top: dotted thin currentcolor;
}
Результат
Специфікації
Специфікація |
---|
Selectors Level 4 (Selectors 4) # negation |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Negation pseudo-class selector ( :not() )
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 9 | Opera Full support 9.5 | Safari Full support 3.1 | WebView Android Full support 2 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 10.1 | Safari on iOS Full support 2 | Samsung Internet Full support 1.0 |
Selector list argument
|
Chrome Full support 88 | Edge Full support 88 | Firefox Full support 84 | Internet Explorer No support Ні | Opera Full support 74 | Safari Full support 9 | WebView Android Full support 88 | Chrome Android Full support 88 | Firefox for Android Full support 84 | Opera Android No support Ні | Safari on iOS Full support 9 | Samsung Internet Full support 15.0 |
Дивіться також
-
Інші функційні псевдокласи CSS:
-
Як :not() утворює ланцюжки з багатьох селекторів на блозі MDN (2023)