Selector Expressions 2 jQuery Selector Expressions CSS CSS DOM Tree This sentence is in <div id="myid">. It is followed by a horizontal rule. This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>. This is the first list item (<li>) in an unordered list (<ul>). This is the second list item. It has a link in it. This is the third list item. It has a class of "myclass otherclass" This is the fourth list item. It has strong text and emphasized text. second-level list item 1 second-level list item 2 <p class="myclass">This is another paragraph. It has class="myclass" Otherwise, nothing special about it at all. It is here for example purposes only. It has no other reason to exist. If the paragraph were conscious and aware of its own state, it would be filled with existential dread. T $('p') $('code') #myid $('div#myid') $('#myid') .myclass $('.myclass') $('p.myclass') $('.otherclass.myclass') E F $('div code') $('ul strong') E > F $('li > ul') $('p > code') E + F $('ul + p') $('strong + em') E ~ F $('p ~ ul') $('code ~ code') E,F,G $('code,strong,em') $('strong,p') :nth-child(n) $('li:nth-child(2)') $('p:nth-child(5)') :first-child $('li:first-child') $('strong:first-child') :last-child $('li:last-child') $('code:last-child') :only-child $(':only-child') $('code:only-child') :empty $(':empty') $('hr:empty') :not(s) $('li:not(.myclass[ul])') $('li:not(:last-child)') * $('*') $('p > *') XPath XPath DOM Tree (link has rel="nofollow self") This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>. This is the first list item (<li>) in an unordered list (<ul>). This is the second list item. It has a link with lots of attributes in it. This is the third list item. It has a class of "myclass" This is the fourth list item. It has strong text and emphasized text. second-level list item 1 second-level list item 2 <p class="myclass">This is another paragraph. It has class="myclass" Otherwise, nothing special about it at all. It is here for example purposes only. It has no other reason to exist. If the paragraph were conscious and aware of its own state, it would be filled with existential dread. E//F $('p//code') $('ul//a') E/F $('li/ul') $('p/code') E/.. $('code/..') $('p/../ul') $('li/../../../../ul') [F] $('li[.myclass]') $('p[code]') [@foo] $('a[@rel]') $('li[@class]') [@foo=bar] $('a[@rel=self]') $('li[@class=myclass]') $('a[@rel=nofollow self]') $('a[@rel="nofollow self"]') [@foo!=bar] $('a[@rel!=nofollow]') $('li[@class!=myclass]') [@foo^=bar] $('a[@rel^=s]') $('[@class^=my]') E[@foo$=bar] $('a[@title$=blog]') $('[@class$=class]') E[@foo*=bar] $('a[@title*=jQuery]') $('[@class*=cla]') Form Form DOM Tree This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>. select list w/ options another option a third option This is a textarea Radio Checked Radio Not Checked Checkbox Checked Checkbox Not Checked Another checkbox Not Checked Button button :input $(':input') :text $(':text') :password $(':password') :button $(':button') :image $(':image') :reset $(':reset') :checked $(':checked') Custom Custom DOM Tree This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>. This is the first list item (<li>) in an unordered list (<ul>). This is the second list item. It has a link in it. This is the third list item. It has a class of "myclass" This is the fourth list item. It has strong text and emphasized text. second-level list item 1 second-level list item 2 <p class="myclass">This is another paragraph. It has class="myclass" Otherwise, nothing special about it at all. It is here for example purposes only. It has no other reason to exist. If the paragraph were conscious and aware of its own state, it would be filled with existential dread. :even $('li:even') $('code:even') :odd $('li:odd') $('code:odd') :eq(n) and E:nth(n) $('li:eq(2)') $('p:nth(1)') :gt(n) $('li:gt(2)') $('code:gt(3)') :lt(n) $('li:lt(2)') $('code:lt(3)') :first $('li:first') $('code:first') :last $('li:last') $('code:last') :parent $('li:parent') $('p:parent') :contains(test) $('li:contains("second")') $('p:contains("nothing special")') :visible $('li:visible') $('li:hidden') :hidden $('li[strong]') $('p[code]')