jQuery Selector Tester

HTML Text to search:

Search Pattern:

Search Results:
# id tagName className outerHTML

jQuery Selector Cheat Sheet  — Double click a row to apply the selector
Selector Example $("pattern") Notes
Wild Card * Returns ALL elements
Element p Returns all paragraph elements <p>One</p>  <p> Two</p> 
ID #MyID Returns all elements with id of MyID:  <div id="MyID"> </div>
Class .MyClass Returns all elements with css class of MyClass:  <div class="MyClass"> </div> 
And div, span Returns all div AND span elements.  The comma is the AND operator.
Child div > span Returns span elements directly inside a div.
Ancestor div span Returns all span elements inside a div.  The space is the Ancestor operator.
Adjacent Sibling div + input Return each input preceded by a div.
General Sibling span ~ input Return all inputs preceded by a span.
Attribute [xyz] Returns all elements with the attribute:  <input xyz="abc" />  <div xyz="123" />
Attribute Value input[xyz=abc] Returns all input elements with an attribute of xyz and value of abc: <input xyz="abc" />
Attr$ input[id$=abc] Returns <input id="123abc" /> (ends with)
Attr^ input[id^=abc] Returns  <input id="abc123" /> (starts with)
Attr* input[id*=abc] Returns  <input id="123abc123" /> (contains)
Multiple input[name=abc][value=yes] Returns  <input name="abc" value="yes" />  (both attributes/values present)
Missing input:not([alt]) Returns all input elements MISSING attribute alt
Attr| input[lang|=en] Return elements with lang "en" AND "en-"
Attr~ input[class~=My] Return elements with the WHOLE word ""My"
Checkbox input[type=checkbox]:checked Returns all checked checkboxes
Radio Button input[type=radio]:not(:checked) Returns all unchecked radio buttons
Selected #MySelect :selected Returns all Selected elements from element with id MySelect
Even items #MyTable tr:even Returns all even rows (can also use odd). Note: Even/Odd is zero based.
nth-child #MyTable TR:nth-child(2) Returns element by position, in this case the 2nd row in the table. Note: nth-position is 1 based.
Contains p:contains("Hello") Returns all paragraph elements that contain the text "Hello"
Copyright 2011 Steve Wellens:    Blog Article