jQuery :not() Selector

What You’ll Learn

The :not() selector is jQuery’s negation filter: it keeps every element that does not match the selector inside the parentheses. Available since jQuery 1.0, it is ideal for “everything except…” queries — unchecked inputs, inactive menu items, or visible fields minus hidden tokens.

Introduction

Most jQuery selectors answer “give me elements that look like this.” The :not() pseudo-class flips the question: “give me elements that do not look like this.” You attach it to a base selector — for example input:not(:checked) means “every input except the checked ones.”

This pattern shows up constantly in UI work: dim inactive tabs, style unchecked labels, skip hidden CSRF fields, or highlight published cards while ignoring drafts. Official jQuery documentation also notes that the .not() method is often easier to read when exclusions get complex — both approaches are covered here.

Understanding the :not() Selector

Think of :not() as a gate at the end of a selector. jQuery first finds candidates matching the part before :not(), then removes any that also match the filter inside the parentheses.

• li:not(.active) → all li elements except those with class active.
• input:not(:checked) → inputs that are not currently checked.
• div:not(.sidebar) → every div except sidebar blocks.
• div:not(.skip, .draft) → exclude two classes in one expression.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":not(selector)" )

// common patterns:
$( "li:not(.active)" )
$( "input:not(:checked)" )
$( "input:not([type=hidden])" )
$( "div:not(.skip, .draft)" )

// complex inner filters (official docs):
$( "div:not(div a)" )   // exclude divs containing an anchor
$( "div:not(div,a)" )   // comma-separated exclusions

Parameters

• selector — any valid jQuery/CSS selector (or comma-separated list) describing elements to exclude from the result.

Return value

• A jQuery object containing every element that matched the base selector and did not match the inner filter.
• An empty collection when every candidate is excluded or none exist.

Official jQuery API example

// Highlight span labels beside unchecked inputs
$( "input:not(:checked) + span" ).css( "background-color", "yellow" );

// Disable inputs so the demo state stays fixed
$( "input" ).attr( "disabled", "disabled" );

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 cover class exclusions, attribute filters, comma-separated lists, and the .not() method. Use the Try-it links to run each snippet in the browser.

$( "input:not(:checked) + span" ).css( "background-color", "yellow" );

// Keep demo state fixed (official demo disables inputs)
$( "input" ).attr( "disabled", "disabled" );

Unchecked input labels (e.g. "lcm") get yellow background
Checked inputs (Mary, Peter) — adjacent spans stay default
Clicking has no effect — inputs are disabled

$( "#nav li:not(.active)" ).addClass( "dimmed" );

// Only non-active items receive the dimmed class

Dashboard (active) — full opacity
Reports, Settings, Help — dimmed with .dimmed class

var visible = $( "#signup input:not([type=hidden])" ).length;

$( "#count" ).text( visible + " visible input(s)" );

// Hidden csrf field is excluded from the count

3 visible input(s) (hidden CSRF token excluded)

$( "div.card:not(.skip, .draft)" ).addClass( "highlight" );

// Equivalent idea with chained :not() — less readable:
// $("div.card").not(".skip").not(".draft")

Published cards — green highlight border
.skip and .draft cards — unchanged (excluded)

// CSS :not() — compact for simple cases
$( "#toolbar button:not(.ghost)" ).addClass( "via-not" );

// .not() — clearer when excluding several classes
$( "#toolbar button" ).not( ".ghost, .danger" ).addClass( "via-method" );

// .not() also accepts a jQuery object or function filter

:not(.ghost) matched 2 button(s) — Save, Delete
.not('.ghost, .danger') matched 1 button(s) — Save only

🚀 Common Use Cases

• Form styling — highlight labels beside input:not(:checked).
• Navigation — dim li:not(.active) menu items.
• Validation — operate on visible fields with input:not([type=hidden]).
• Content filters — show published items via div:not(.draft).
• Table rows — select tr:not(.empty-row) for bulk actions.
• Refactoring — replace long negative logic with a readable .not() chain.

📝 Notes

• Available since jQuery 1.0 — one of the oldest jQuery selector extensions built on standard CSS negation.
• All selector types are accepted inside the parentheses, including combinators and nested pseudo-classes.
• Official docs: .not() often produces more readable code than deeply nested :not() strings.
• Comma-separated lists inside :not() exclude multiple patterns in one pass (:not(.a, .b)).
• Scope matters — $("#form input:not(:checked)") only searches inside the form.
• Native document.querySelectorAll supports :not() in modern browsers; jQuery adds consistent behavior across older targets.

💡 Best Practices