jQuery селектор отрицания :not

Определение и применение

jQuery селектор отрицания :not позволяет выбрать элементы отличные от указанных. Селектор отрицания используется вместе с другим селектором, чтобы выбрать все элементы, кроме указанных в селекторе.

jQuery синтаксис:

$( "selector:not(selector)" )

В CSS и jQuery можно использовать одинаковое условие внутри :not():

CSS:
a:not(:last-child) {
  блок объявлений;
}

jQuery:
$( "a:not(:last-child)" )  // повторять селектор a внутри :not() не нужно

Добавлен в версии jQuery

Селектор в CSS

Пример использования

Селектор отрицания :not — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<p>Первый абзац</p>
<p class="test">Второй абзац</p>
<p>Третий абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('p:not(p:first-child)').css('color', 'red') // выбирает и стилизует все элементы <p>, за исключением тех, которые являются первым дочерним элементом своего родителя
    $('p:not(.test)').css('text-decoration', 'underline') // выбирает и стилизует все элементы <p>, за исключением тех, которые имеют класс test
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

p:not(:first-child) {
  /* выбирает все элементы <p>, за исключением тех, которые являются первым дочерним элементом своего родителя */
  font-weight: bold; /* определяет жирное начертание символов */
}

В этом примере мы:

• С использованием CSS селектора отрицания селектор :not выбрали все элементы <p>, за исключением тех, которые являются первыми дочерними элементами своего родителя. В нашем случае это первый абзац и стилизовали установив жирное начертание символов второму и третьему абзацу.
• С использованием jQuery селектора отрицания :not выбрали и стилизовали (цвет текста красный) все элементы <p>, за исключением тех, которые являются первыми дочерним элементами своего родителя (в нашем случае первый абзац). Селектор p:not(:first-child) работает без повторения p внутри :not().
• С использованием jQuery селектора отрицания :not выбрали и стилизовали (декорирование текста - нижнее подчеркивание) все элементы <p>, за исключением тех, глобальный атрибут class которых, имеет значение "test".