jQuery Selectors Tester

Interactive tool to test, learn HTML elements selection


Search Results

# id tagName className outerHTML

jQuery Selector Cheat Sheet  — 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.
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
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"
nth-child li:nth-child(1) Returns all li elements that are the first child of their parent
nth-child li:nth-child(3) Returns all li elements that are the third child of their parent
nth-child li:nth-last-child(1) Returns all li elements that are the first child of their parent, counting from the last li element

Optimism is an occupational hazard of programming: feedback is the treatment.

Kent Beck

CodersTool Categories