This page is the jQuery Selectors index for the tutorial track. Each row links to a full guide with syntax, examples, and FAQs.
Learn the jQuery overview on /jquery. Use this page when you need a selector such as #id, .class, or :checked.
Beginner path.
Start with #id, .class, and tag selectors, then combinators (>, space, +, ~)—add attribute and form filters as needed.
Syntax
How to Call a Selector
Pass a selector string to $() — escape special characters in IDs/classes with \\:
jQuery
$("#app"); // ID
$(".card"); // class
$("p"); // element
$("ul > li"); // child
$("form input"); // descendant
$("input[type='text']"); // attribute
$("input:checked"); // form state
$("tr:even"); // basic filter
$("#foo\\.bar"); // escaped ID with a dot
$(".item").length; // match count
Browse
jQuery Selectors Table
All Selectors guides in this jQuery tutorial series (62 tutorials).
Basic Selectors
5 methods
Start here — match by tag, id, class, universal *, or comma-separated unions.
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.
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.
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.
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 (~).
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.
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.
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.
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.
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.
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.
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'].
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.
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.
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.
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]).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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+).
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.
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.
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.
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"].
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.
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.
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.
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.
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.
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.
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.
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.
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.
Selectors are strings passed to $() that tell jQuery which DOM elements to collect. They use CSS-style syntax—tags, classes, IDs, attributes, combinators, and jQuery extensions—and return a collection you can chain.
Start with #id, .class, and element (tag) selectors, then combinators (>, space, +, ~). Add attribute and form filters next; use :eq / :nth-child when you need index-based matching.
No. Many jQuery extensions (:checkbox, :visible, :eq, :contains, …) are not native CSS. Prefer CSS selectors when you can, or filter with .filter() after a fast CSS query.
Yes on large pages. Prefer specific IDs/classes, or scope with a parent: $('#box').find('*'). Count matches with .length.
Start with the ID and class selectors, then the child/descendant combinators. Open form and attribute guides when you need to match controls or HTML attributes.
