CSS 1-3 Selectors

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 ~ p')
$('strong ~ em')

E,F,G

$('code,strong,em')
$('strong,p')

:has(E)

$('li:has(a)')
$(':has(strong)')

:first-child

$('li:first-child')
$('strong:first-child')

:last-child

$('li:last-child')
$('code:last-child')

:nth-child(n)

$('li:nth-child(2)')
$('li:nth-child(odd)')

:nth-child(an+b)

$('li:nth-child(2n)')
$('p:nth-child(n+1)')

:not(s)

$('li:not(:last-child)')
$('li:not(:has(ul))')

*

$('*')
$('p > *')