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

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

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

jQuery синтаксис:

$( "selector:not(selector)" )

Обратите внимание на отличие от синтаксиса CSS и jQuery при использовании некоторых селекторов:

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

jQuery:
$( "a:not(a:last-child)" )  // необходимо продубировать селектор типа a

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

1.0

Селектор в CSS

CSS селектор :not css3

(псевдокласс отрицания).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора отрицания :not</title>
		<style>
		p:not(:first-child) { /* выбирает все элементы <p>, за исключением тех, которые являются первым дочерним элементом своего родителя */
		font-weight: bold; /* определяет жирное начертание символов */
		}
		</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "p:not(p:first-child)" ).css("color", "red"); // выбирает и стилизует все элементы <p>, за исключением тех, которые являются первым дочерним элементом своего родителя
	  $( "p:not(.test)" ).css("text-decoration", "underline"); // выбирает и стилизует все элементы <p>, за исключением тех, которые имеют класс test
	});
		</script>
	</head>
	<body>
		<p>Первый абзац</p>
		<p class = "test">Второй абзац</p>
		<p>Третий абзац</p>
	</body>
</html>

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

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

Результат нашего примера:

Пример использования jQuery селектора отрицания :not. — Пример использования jQuery селектора отрицания :not

jQuery селекторы