jQuery :not() Selector

Beginner

7 min read

Updated: Oct 2026

5 examples

Live preview

Definition

What Is `:not()`?

:not(selector) selects elements that do not match the given filter. Attach it to a base selector to subtract a group. Available since jQuery 1.0.

Tip (official)

For complex or variable exclusions, prefer the .not() method — jQuery docs call it more readable in most cases.

Remember

$(":not(selector)")
$("base:not(filter)")

$("li:not(.active)")           → all li except .active
$("input:not(:checked)")       → unchecked inputs
$("div:not(.skip, .draft)")    → exclude several classes
$("input:not(:checked) + span") → span after unchecked input

Use	Prefer
Simple exclusion in one query	`$("li:not(.active)")`
Complex / dynamic filter	`$("li").not(".active")`
Positive “has match” filter	`$("div:has(p)")`

Approach

How to Use `:not()`

Start with what you want, then subtract what you do not want.

Choose a base set — li, input, div, and so on.
Add :not(filter) with any valid selector inside.
Chain a method on the remaining matches.
If the filter string gets messy, switch to .not().

Piece	Required?	Role
Base selector	Usually	Elements to start from (optional if `:not()` stands alone)
`:not(…)`	Yes	Negation filter
Inner selector	Yes	What to exclude — any valid selector

Pseudocode

candidates = find(baseSelector)   // or all elements
result = empty set

for each element E in candidates:
    if E does NOT match innerSelector:
        keep E

return jQuery(result)

Reference

Cheat Sheet

Keep these facts handy while writing exclusions.

Topic	Detail
Syntax	`$("base:not(filter)")`
Meaning	Keep elements that fail the filter
Inner args	Any selector; commas exclude several
vs `.not()`	Selector string vs method on a set
Snapshot	Matches at query time only
Since	jQuery 1.0 (CSS3 + jQuery extensions)

Try it

Live Preview

Pick a :not() pattern against a small sample DOM and see what remains.

Sample markup mirrors the official unchecked-input demo plus class exclusions.

Result

$("input:not(:checked)")
matched: 2
tags: INPUT, INPUT

/* keep elements that fail the filter */

Code

jQuery Examples

Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.

Example 1 — Official Demo: `input:not(:checked) + span`

Select spans that sit right after unchecked inputs (jQuery API example).

jQuery

var labels = $("input:not(:checked) + span").map(function () {
  return this.textContent.trim();
}).get().join(", ");

console.log($("input:not(:checked)").length);
console.log(labels);

Try It Yourself

How It Works

Negate checked. input:not(:checked) keeps only unchecked boxes.
Step to the span. + span takes the immediate next sibling if it is a span.
Read labels. Map text content for a clear console list.
Checked skipped. Mary’s checked input never enters the set.

Example 2 — Exclude a Class: `li:not(.active)`

Keep every list item except those marked active.

jQuery

$("li:not(.active)").each(function () {
  this.textContent = "[ok] " + this.textContent;
});

console.log($("li:not(.active)").length);

Try It Yourself

How It Works

Start with all li. Then drop any with class active.
Prefix the rest. Remaining items show [ok].
Active untouched. The excluded item never enters .each().
Common pattern. Style or enable everything except the current tab/item.

Example 3 — Comma Exclusions: `div:not(.skip, .draft)`

Exclude several classes in one :not() filter.

jQuery

var names = $("div:not(.skip, .draft)").map(function () {
  return this.className || "(none)";
}).get().join(", ");

console.log($("div:not(.skip, .draft)").length);
console.log(names);

Try It Yourself

How It Works

List exclusions. Comma-separated selectors inside :not() are all removed.
Keep the rest. Only .keep (or other non-matching divs) remain.
Official support. Docs allow forms like :not(div,a).
Readable alternative. $("div").not(".skip, .draft") does the same via a method.

Example 4 — Complex Inner Selector: `:not(div a)`

Exclude links that live inside a div; keep other anchors.

jQuery

// Official docs: all selectors are accepted inside :not()
var texts = $("a:not(div a)").map(function () {
  return this.textContent.trim();
}).get().join(", ");

console.log($("a").length);
console.log($("a:not(div a)").length);
console.log(texts);

Try It Yourself

How It Works

Start with all links. Then drop those that match div a.
Nested filter. div a means “an a descendant of a div.”
Outside kept. A top-level link does not match that pattern, so it remains.
Readability note. For longer filters, prefer $("a").not("div a").

Example 5 — `:not()` vs `.not()`

Build the same exclusion with a selector or a method call.

jQuery

var $byPseudo = $("li:not(.active)");
var $byMethod = $("li").not(".active");

console.log($byPseudo.length === $byMethod.length);
console.log($byPseudo.length);

Try It Yourself

How It Works

Selector path. $("li:not(.active)") filters while querying.
Method path. Select all li, then remove .active with .not().
Same result. Lengths match on the same markup.
When to choose. Simple string → :not(). Existing set or complex filter → .not().

Edge Cases & Pitfalls

Check these before relying on :not() in real projects.

snapshot

Results do not auto-update

Official demo notes checkboxes do not re-style on click unless you re-query or bind events. Always re-run after state changes.

readability

Complex `:not()` strings get hard to read

jQuery recommends .not() when exclusions involve variables or long filters.

css

Native CSS `:not()` is stricter in older browsers

Early CSS only allowed simple selectors inside :not(). jQuery accepts broader forms; do not assume every jQuery string works in raw querySelectorAll everywhere.

base

Always scope the base set

$(":not(.x)") can be huge. Prefer $("li:not(.x)") or a container context.

Compatibility

Browser Support

:not() is supported in jQuery since 1.0. Modern browsers also implement CSS :not() in querySelectorAll; jQuery extends complex and comma-separated filters.

✓ CSS3 · jQuery 1.0+

jQuery :not(selector)

Supported in all modern browsers with jQuery. Prefer .not() for complex exclusions when readability matters.

100% Widely supported

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

:not() Universal with jQuery

Bottom line: Safe for jQuery apps. Keep filters simple in :not(); use .not() when the exclusion logic grows.

Analysis

Performance Notes

Approach	Cost	Best for
`$("base:not(f)")`	One query + filter	Simple static exclusions
`$("base").not(f)`	Select then subtract	Complex / dynamic filters
`$(":not(f)")`	Very broad	Avoid — always scope a base

Narrow the base selector first. Excluding from a small set is cheaper and clearer than starting from the whole document.

Remember

Key Takeaways

Role: :not(filter) keeps elements that fail the filter.
Inner args: any selector; commas exclude several at once.
Method twin: prefer .not() for complex exclusions.
Snapshot: re-query after DOM or checked state changes.

One line: $("base:not(filter)") means “everything in base except what matches filter.”

Frequently Asked Questions

What does the :not() selector do?

:not(selector) keeps elements that do not match the inner selector. $("li:not(.active)") returns every list item except those with class active.

What can go inside :not()?

jQuery accepts any valid selector inside the parentheses — elements, classes, IDs, attributes, and other pseudo-classes. Official docs show both :not(div a) and :not(div,a).

How is :not() different from .not()?

:not() is part of a CSS selector string. .not() is a method that removes items from an existing jQuery collection. For complex or dynamic exclusions, official docs recommend .not() for readability.

Can I exclude multiple selectors at once?

Yes. Use a comma-separated list: $("div:not(.skip, .draft)"). Each listed selector is excluded.

Does :not() update when the page changes?

No. Like other selectors, it matches the DOM at query time. Recheck after user actions if state changes (for example, checkboxes).

Which jQuery versions support :not()?

Since jQuery 1.0. Modern browsers also support CSS :not() via querySelectorAll; jQuery extends complex and comma-separated cases.

Next: Child Selector

Select direct children with the parent > child combinator.

Child selector tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery :contains() Selector jQuery Child Selector ("parent > child")

jQuery :not() Selector

What Is :not()?

How to Use :not()

Pseudocode

Cheat Sheet

Live Preview

jQuery Examples

Example 1 — Official Demo: input:not(:checked) + span

How It Works

Example 2 — Exclude a Class: li:not(.active)

How It Works

Example 3 — Comma Exclusions: div:not(.skip, .draft)

How It Works

Example 4 — Complex Inner Selector: :not(div a)

How It Works

Example 5 — :not() vs .not()

How It Works

Edge Cases & Pitfalls

Results do not auto-update

Complex :not() strings get hard to read

Native CSS :not() is stricter in older browsers

Always scope the base set

Browser Support

jQuery :not(selector)

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

.not() method

:checked selector

:has() selector

:contains() selector

Class selector

Next: Child Selector

About the author

What Is `:not()`?

How to Use `:not()`

Example 1 — Official Demo: `input:not(:checked) + span`

Example 2 — Exclude a Class: `li:not(.active)`

Example 3 — Comma Exclusions: `div:not(.skip, .draft)`

Example 4 — Complex Inner Selector: `:not(div a)`

Example 5 — `:not()` vs `.not()`

Complex `:not()` strings get hard to read

Native CSS `:not()` is stricter in older browsers