jQuery selectors tell the library which DOM nodes to work on. This hub introduces the universal all selector ("*") and links to 62 selector tutorials with try-it labs, performance guidance, and FAQs.
$()Entry point
"*"Match all
.find("*")
.lengthCount nodes
Prefer specific
Full index
Every jQuery script begins with a selector. You pass a string to $() or jQuery(), and jQuery searches the DOM for matching elements. The result is a jQuery object — a collection you can chain with methods like .css(), .hide(), or .on().
The all selector — written as an asterisk inside quotes — "*" — matches every element in the search context. It has existed since jQuery 1.0 and mirrors the CSS universal selector. It is useful for counting nodes or applying a blanket style in demos, but jQuery warns it is extremely slow on large documents unless you narrow the context first.
Before reaching for $("*"), ask whether a class, ID, or tag selector would target exactly what you need. Specific selectors run faster and make your code easier to read.
Two common patterns for the universal selector:
// Every element in the document (slow on big pages)
$( "*" )
// Every descendant inside a container (preferred)
$( "#panel" ).find( "*" )"*"Same selector string, different search roots — scope changes both speed and which nodes are included:
Search by selector name or browse by category. Each tutorial includes syntax, try-it examples, and FAQs.
Match every element node — use with care because performance drops on large DOM trees.
| Selector | Description | Tutorial |
|---|---|---|
All Selector ("*") | Select every element in the document or within a scoped container — the universal jQuery selector since 1.0. | Open |
Pseudo-class selectors invented by jQuery — not valid in native querySelectorAll().
| Selector | Description | Tutorial |
|---|---|---|
:animated Selector | Select elements currently running a jQuery animation — slide, fade, show/hide effects — since jQuery 1.2. | Open |
:button Selector | Select button elements and input[type=button] controls — jQuery form pseudo-class since 1.0; CSS equivalent is button, input[type='button']. | Open |
:checkbox Selector | Select all input[type=checkbox] elements — jQuery form pseudo-class since 1.0; prefer input:checkbox over bare :checkbox; CSS equivalent is input[type='checkbox']. | Open |
:radio Selector | Select all input[type=radio] elements — jQuery form pseudo-class since 1.0; equivalent to [type=radio]; prefer input:radio over bare :radio; use input[name=group]:radio for one mutually exclusive group. | Open |
:file Selector | Select all input[type=file] upload controls — jQuery form pseudo-class since 1.0; equivalent to [type=file]; prefer input:file over bare :file; use input[type='file'] for native querySelectorAll performance. | Open |
:image Selector | Select all input[type=image] graphical submit controls — jQuery form pseudo-class since 1.0; equivalent to [type=image]; does not match img tags; prefer input:image over bare :image; use input[type='image'] for native performance. | Open |
:reset Selector | Select all input[type=reset] form reset controls — jQuery form pseudo-class since 1.0; equivalent to [type=reset]; prefer input:reset over bare :reset; use input[type='reset'] for native querySelectorAll performance. | Open |
:submit Selector | Select all submit-type form controls — input[type=submit] and button[type=submit] since jQuery 1.0; always specify type on buttons; official td :submit demo; native alternative input[type='submit'], button[type='submit'], button:not([type]). | Open |
:root Selector | Select the document root element — exactly one node; in HTML always the html element since jQuery 1.9; equivalent to $('html') and document.documentElement; standard CSS pseudo-class also works in querySelector. | Open |
:target Selector | Select the element indicated by the URL hash fragment — id matching the URI fragment identifier since jQuery 1.9; official example p:target for #foo; standard CSS pseudo-class; use hashchange to update on navigation. | Open |
:input Selector | Select all form controls — input, textarea, select, and button elements — official count vs form children demo since jQuery 1.0; jQuery extension; not the same as input tag selector; prefer form :input or .filter(":input") for performance. | Open |
:text Selector | Select all input[type=text] elements — jQuery form pseudo-class since 1.0; since 1.5.2 also matches bare input without type attribute; prefer input:text over bare :text; differs from [type=text] on no-type inputs; use input[type='text'] for native performance. | Open |
:checked Selector | Match currently checked checkboxes, selected radio buttons, and chosen option elements — live state filter since jQuery 1.0; combine with :checkbox for ticked boxes only. | Open |
:selected Selector | Match selected option elements in select dropdowns — jQuery extension since 1.0; does not apply to checkboxes or radios (use :checked); official change demo with option:selected; prefer .filter(':selected') after a CSS option query. | Open |
:disabled Selector | Match form controls that are actually disabled — official input:disabled demo since jQuery 1.0; prefer over [disabled] for live state; prefix with input or button, not bare :disabled. | Open |
:enabled Selector | Match form controls that are currently enabled — official input:enabled demo since jQuery 1.0; complement of :disabled; prefer over :not([disabled]) for live state; prefix with input or button, not bare :enabled. | Open |
:focus Selector | Match elements that currently have focus — official delegate focus/blur demo since jQuery 1.6; prefix with input or button, not bare :focus; prefer document.activeElement for a single global lookup; standard CSS. | Open |
:empty Selector | Select elements with no child nodes (including text) — official td:empty demo since jQuery 1.0; inverse of :parent; prefix with td or div, not bare :empty; whitespace text nodes prevent a match. | Open |
:eq() Selector | Select one element at a zero-based index in the matched set — official td:eq(2) demo since jQuery 1.0; negative indices since 1.8; deprecated in 3.4 — prefer .eq() method instead. | Open |
:lt() Selector | Select elements before a zero-based index in the matched set — official td:lt(4) and td:lt(-2) demo since jQuery 1.0; :lt(1) equals :first; negative indices since 1.8; deprecated in 3.4 — prefer .slice(0, index) instead. | Open |
:gt() Selector | Select elements after a zero-based index in the matched set — official td:gt(4) and td:gt(-2) demo since jQuery 1.0; negative indices since 1.8; deprecated in 3.4 — prefer .slice(index + 1) instead. | Open |
:even Selector | Select elements at even zero-based indices (0, 2, 4…) in the matched set — official tr:even zebra demo since jQuery 1.0; pair with :odd; deprecated in 3.4 — prefer .even() method (3.5+). | Open |
:first Selector | Select the first element in the matched set — official tr:first demo since jQuery 1.0; equivalent to :eq(0) and :lt(1); single match vs many for :first-child; deprecated in 3.4 — prefer .first() method. | Open |
:last Selector | Select the last element in the matched set — official tr:last demo since jQuery 1.0; equivalent to :eq(-1); single match vs many for :last-child; deprecated in 3.4 — prefer .last() method. | Open |
:has() Selector | Select elements that contain at least one descendant matching an inner selector — official div:has(p) demo since jQuery 1.1.4; jQuery extension; prefer .has() method over :has() in selector strings for performance. | Open |
:header Selector | Select all heading elements h1 through h6 in one expression — official page-wide .css() demo since jQuery 1.2; jQuery extension; CSS equivalent is h1, h2, h3, h4, h5, h6; prefer .filter(":header") after a CSS scope for performance. | Open |
:hidden Selector | Select elements that consume no layout space — display:none, type=hidden, zero size, or hidden ancestors — official count and div:hidden.show() demo since jQuery 1.0; opposite of :visible; visibility:hidden and opacity:0 are not :hidden; prefer .filter(":hidden") after CSS scope. | Open |
:visible Selector | Select elements that consume layout space — width or height greater than zero — official div:visible click demo and div:hidden.show() reveal since jQuery 1.0; opposite of :hidden; visibility:hidden and opacity:0 are still :visible; all option elements are hidden; prefer .filter(":visible") after CSS scope. | Open |
:contains() Selector | Select elements whose visible text includes a case-sensitive substring — official div:contains('John') demo since jQuery 1.1.4; jQuery extension, not native CSS. | Open |
Fundamental CSS selectors — match elements by tag name, unique id, or shared class.
| Selector | Description | Tutorial |
|---|---|---|
Element Selector ("element") | Select all elements with a given HTML tag name — official div demo since jQuery 1.0; uses getElementsByTagName; combine with .class or #id for precision. | Open |
ID Selector ("#id") | Select a single element by id attribute — official #myDiv border demo since jQuery 1.0; uses getElementById; escape dots and brackets in id values; zero or one match; combine with tag as h2#pageTitle. | Open |
Class Selector (".class") | Select all elements with a given CSS class — official .myClass demo; chain .a.b for AND; jQuery uses getElementsByClassName when supported since 1.0. | Open |
Multiple Selector ("selector1, selector2, selectorN") | Combine selectors with comma OR logic — official div, span, p.myClass border demo since jQuery 1.0; union of disparate elements; result order is document order; alternative .add() method; standard CSS. | Open |
Standard CSS selectors based on sibling position — match first children or first elements of each tag name among siblings.
| Selector | Description | Tutorial |
|---|---|---|
:first-child Selector | Select elements that are the first child of their parent — official div span:first-child demo since jQuery 1.1.4; can match multiple elements; equivalent to :nth-child(1); standard CSS. | Open |
:last-child Selector | Select elements that are the last child of their parent — official div span:last-child demo since jQuery 1.1.4; can match multiple elements; equivalent to :nth-last-child(1); standard CSS; differs from .last() which returns one element. | Open |
:first-of-type Selector | Select the first element of each tag name among siblings — official span:first-of-type demo since jQuery 1.9; differs from :first-child when mixed element types precede the target; equivalent to :nth-of-type(1); standard CSS. | Open |
:last-of-type Selector | Select the last element of each tag name among siblings — official span:last-of-type demo since jQuery 1.9; differs from :last-child when mixed element types follow the target; equivalent to :nth-last-of-type(1); standard CSS. | Open |
:lang() Selector | Match elements by language code from the lang attribute or inherited language — official div:lang(en-us) and div:lang(es-es) color demo since jQuery 1.9; standard CSS; :lang(en) matches en and en-US prefix variants; differs from exact [lang="en"]. | Open |
Relate elements by DOM structure — direct children with >, descendants with a space.
| Selector | Description | Tutorial |
|---|---|---|
Child Selector ("parent > child") | Match direct children only with the > combinator — official ul.topnav > li demo; stricter than the descendant (space) combinator since jQuery 1.0. | Open |
Descendant Selector ("ancestor descendant") | Match elements at any nesting depth with the space combinator — official form input demo since jQuery 1.0; broader than the child (>) combinator. | Open |
Next Adjacent Selector ("prev + next") | Match the immediate next sibling — official label + input demo since jQuery 1.0; adjacent sibling combinator (+); one element only; same parent required; stricter than general sibling (~). | Open |
Next Siblings Selector ("prev ~ siblings") | Match all following siblings — official #prev ~ div demo since jQuery 1.0; general sibling combinator (~); broader reach than adjacent (+); gaps between siblings do not break the match; same parent required. | Open |
Target elements by HTML attribute names and values — standard CSS syntax supported since jQuery 1.0.
| Selector | Description | Tutorial |
|---|---|---|
Has Attribute Selector [name] | Match elements that have a named attribute with any value — official div[id] one-click demo since jQuery 1.0; foundation before [name="value"] exact matching; standard CSS. | Open |
Attribute Equals [name="value"] | Match attribute values exactly equal to a given string — the foundational exact-match selector for types, names, and fixed tokens since jQuery 1.0. | Open |
Attribute Not Equal [name!="value"] | Exclude one exact attribute value — jQuery extension since 1.0 that also matches elements without the attribute; prefer .not() for performance. | Open |
Attribute Contains Prefix [name|="value"] | Match attribute values equal to a string or starting with that string followed by a hyphen — ideal for language codes like en and en-US. | Open |
Attribute Contains [name*="value"] | Match elements whose attribute value contains a substring anywhere — the most flexible jQuery attribute value selector since 1.0. | Open |
Attribute Contains Word [name~="value"] | Match when a space-separated word in the attribute value exactly equals the search string — ideal for class lists and token attributes. | Open |
Attribute Starts With [name^="value"] | Match attribute values that begin exactly with a given string — case-sensitive prefix matching for URL schemes and field naming patterns since jQuery 1.0. | Open |
Attribute Ends With [name$="value"] | Match attribute values that end exactly with a given string — case-sensitive suffix matching for extensions and naming patterns since jQuery 1.0. | Open |
Multiple Attribute [name="value"][name2="value2"] | Chain attribute filters with AND logic — official input[id][name$='man'] demo since jQuery 1.0; match elements satisfying all filters; combine presence [id] with = ^ $ * operators; standard CSS. | Open |
Additional jQuery selector tutorials — search or browse alphabetically.
| Selector | Description | Tutorial |
|---|---|---|
not-selector | Tutorial for the jQuery selector not selector. | Open |
nth-child-selector | Tutorial for the jQuery selector nth child selector. | Open |
nth-last-child-selector | Tutorial for the jQuery selector nth last child selector. | Open |
nth-last-of-type-selector | Tutorial for the jQuery selector nth last of type selector. | Open |
nth-of-type-selector | Tutorial for the jQuery selector nth of type selector. | Open |
odd-selector | Tutorial for the jQuery selector odd selector. | Open |
only-child-selector | Tutorial for the jQuery selector only child selector. | Open |
only-of-type-selector | Tutorial for the jQuery selector only of type selector. | Open |
parent-selector | Tutorial for the jQuery selector parent selector. | Open |
password-selector | Tutorial for the jQuery selector password selector. | Open |
Include jQuery 3.7+ and open the Try-it links to run each snippet in the browser.
Official jQuery demo pattern: select all nodes, apply a style, and read .length.
var elementCount = $( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );Scope the universal selector with .find("*") so head and script tags are excluded.
var elementCount = $( "#test" ).find( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );jQuery selectors are the first step in every script. The universal "*" selector matches every element — powerful for demos and node counts, but costly on large pages. Scope it inside a container or prefer specific selectors in production code.
The CSS universal selector * also exists in plain JavaScript through document.querySelectorAll("*"). jQuery wraps the same idea in a chainable collection and adds cross-browser consistency that mattered most in older IE versions.
Five examples, performance cautions, and interactive try-it labs.
5 people found this page helpful