Sizzle selector syntax pattern of searchable items

Question

Hey guys,

I'm still learning how to use Sizzle selector. So far I know this:

Sizzle('#blah') - searches the entire document for element(s) with id 'blah'.

Sizzle('.blah') - searches the entire document for element(s) with css class 'blah'.

Then today I found this:

Sizzle('> div') - searches entire document for elements of 'div' tags. (I could be wrong but that's what it is doing for me)

Which makes me ponder, what other syntax are there to search for stuff using Sizzle??

Answer 1

The > is called child selector and is used to find direct/immediate children of parent elements.

Example:

<ul id="ul">
  <li>Child</li>
  <li>Child</li>
  <li>Child</li>
  <li>
      <ul>
         <li>Child Again</li>
         <li>Child Again</li>
         <li>Child Again</li>
      </ul>
  </li>
</ul>

Sizzle:

Sizzle('ul#ul > li')

In the above example, the child selector will only select direct children that is ones with text Child not Child Again

Answer 2

pretty much any selector you can do with css3 you can do with sizzle.

Answer 3

Here's the official reference on which selectors Sizzle supports: http://wiki.github.com/jeresig/sizzle/. But, as has already been said, it's basically the same syntax as CSS3 selectors.

---

And here's the link the OP was apparently asking for: http://www.w3.org/TR/css3-selectors/