What is the difference between jQuery's space and > selectors?

Question

What's the difference between the space and > selectors? And possibly related, how can I look for something that's the direct child of something else, and not lower down the descendant line?

Answer 1

For:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

For example

$("ul > li").addClass("blah");

adds class "blah" to 1 2 and 3 whereas:

$("ul li").addClass("blah");

add class "blah" to every list element.

I'm not sure what you're referring to with < and ? operators.

Answer 2

In CSS, > means "direct child of": only nodes that are direct children are selected.

While a space means "any descendant of": direct children and children of those children could be selected.

I would wager jQuery uses the same convention.

Answer 3

As already mentioned, a space will select any descendant, whereas > will select only immediate children. If you want to select only grandchildren or great-grandchildren, then you could use this:

#foo > * > * > .bar

(all elements with class "bar" which are great grandchildren of the element with id "foo")

Answer 4

look at this..

$(".testit > a") //match the first <a> tag below
$(".testit a") // matches all <a> tag below

<p class="testit">
  <a href="#">All the rules will match this</a>
  <span>
    <a href="#">second rule can only select this</a>
  </span>
</p>