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
Basic
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> 
Combinations
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.
Attributes
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
Misc
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"
Lists
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

If you think technology can solve your security problems, then you don’t understand the problems and you don’t understand the technology.

Bruce Schneier

CodersTool Categories