: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
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
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

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.