Easy Tutorial
❮ Misc Data Misc Jquery Speed ❯

jQuery Selectors

Please use our jQuery Selector Tester to demonstrate different selectors.

Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id="lastname"
.class $(".intro") All elements with class="intro"
.class,.class $(".intro,.demo") All elements with the class "intro" or "demo"
element $("p") All <p> elements
el1,el2,el3 $("h1,div,p") All <h1>, <div>, and <p> elements
:first $("p:first") The first <p> element
:last $("p:last") The last <p> element
:even $("tr:even") All even <tr> elements, starting from index 0 (even), 1 (odd), and so on.
:odd $("tr:odd") All odd <tr> elements, starting from index 0 (even), 1 (odd), and so on.
:first-child $("p:first-child") All <p> elements that are the first child of their parent
:first-of-type $("p:first-of-type") All <p> elements that are the first <p> element of their parent
:last-child $("p:last-child") All <p> elements that are the last child of their parent
:last-of-type $("p:last-of-type") All <p> elements that are the last <p> element of their parent
:nth-child(n) $("p:nth-child(2)") All <p> elements that are the second child of their parent
:nth-last-child(n) $("p:nth-last-child(2)") All <p> elements that are the second child of their parent, counting from the last child
:nth-of-type(n) $("p:nth-of-type(2)") All <p> elements that are the second <p> element of their parent
:nth-last-of-type(n) $("p:nth-last-of-type(2)") All <p> elements that are the second <p> element of their parent, counting from the last child
:only-child $("p:only-child") All <p> elements that are the only child of their parent
:only-of-type $("p:only-of-type") All <p> elements that are the only <p> element of their parent
parent > child $("div > p") All <p> elements that are direct children of <div> elements
parent descendant $("div p") All <p> elements that are descendants of <div> elements
element + next $("div + p") The <p> element immediately following each <div> element
element ~ siblings $("div ~ p") All <p> elements that are siblings of <div> elements
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
:not(selector) $("input:not(:empty)") All non-empty input elements
:header $(":header") All header elements <h1>, <h2> ...
:animated $(":animated") All animated elements
:focus $(":focus") The element that currently has focus
:contains(text) $(":contains('Hello')") All elements that contain the text "Hello"
:has(selector) $("div:has(p)") All <div> elements that have a <p> element inside them
:empty $(":empty") All empty elements
:parent $(":parent") All elements that are parents (have child elements or text)
:hidden $("p:hidden") All hidden <p> elements
:visible $("table:visible") All visible tables
:root $(":root") The root element of the document
:lang(language) $("p:lang(de)") All <p> elements with a lang attribute value of "de"
[attribute] $("[href]") All elements with an href attribute
[attribute=value] $("[href='default.htm']") All elements with an href attribute value equal to "default.htm"
[attribute!=value] $("[href!='default.htm']") All elements with an href attribute value not equal to "default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with an href attribute value ending with ".jpg"
[[attribute =value]](sel-attribute-prefix-value.html) $("[title ='Tomorrow']") All elements with a title attribute value equal to 'Tomorrow' or starting with 'Tomorrow' followed by a hyphen
[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with "Tom"
[attribute~=value] $("[title~='hello']") All elements with a title attribute value containing the word "hello"
[attribute*=value] $("[title*='hello']") All elements with a title attribute value containing the string "hello"
[name=value][name2=value2] $( "input[id][name$='man']" ) Input elements with an id attribute and a name attribute ending with "man"
:input $(":input") All input elements
:text $(":text") All input elements with type="text"
:password $(":password") All input elements with type="password"
:radio $(":radio") All input elements with type="radio"
:checkbox $(":checkbox") All input elements with type="checkbox"
:submit $(":submit") All input elements with type="submit"
:reset $(":reset") All input elements with type="reset"
:button $(":button") All input elements with type="button"
:image $(":image") All input elements with type="image"
:file $(":file") All input elements with type="file"
:enabled $(":enabled") All enabled elements
:disabled $(":disabled") All disabled elements
:selected $(":selected") All selected dropdown list elements
:checked $(":checked") All checked checkboxes
.selector $(selector).selector Deprecated in jQuery 1.7. Returns the original selector passed to jQuery()
:target $( "p:target" ) Selector matches <p> elements whose ID matches the formatted identifier in the URI
❮ Misc Data Misc Jquery Speed ❯