jQuery Child Selector

What Is parent > child?

The child combinator parent > child (since jQuery 1.0) selects only direct children of a parent. It is a more specific form of the descendant combinator (parent child), which matches at any nesting depth. Official docs call it a standard CSS combinator.

$("ul.topnav > li")   // direct li only
$("ul.topnav li")     // every li inside (any depth)

$("div > span")       // spans that are immediate children
$("nav > ul > li > a") // chain one level at a time

// Equivalent traversal: $(parent).children(child)

How to Use parent > child

Name the parent, then the child type you want at the next level only.

1. Write a parent selector (id, class, or tag) on the left of >.
2. Write a child selector on the right — only matching immediate children are kept.
3. Chain more > steps when you need a fixed depth (e.g. nav > ul > li > a).
4. Prefer > over a space when nested markup could match too many elements.
5. If you already have a jQuery set, .children() does the same job as a method.

Pseudocode

matches = []
for each parentElement matching "parent":
    for each childElement of parentElement.children:   // first level only
        if childElement matches "child":
            matches.add(childElement)

return matches

// Contrast — descendant (space):
// walk ALL nested descendants, not just .children

Cheat Sheet

Keep these facts handy when choosing between > and a space.

Live Preview

Run ul.topnav > li vs ul.topnav li on the same nested list and compare match counts.

$("ul.topnav > li").length
→ 3

matched → Item 1, Item 2, Item 3

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var labels = [];
$("ul.topnav > li").each(function () {
  var text = $.trim(
    $(this).contents().filter(function () {
      return this.nodeType === 3;
    }).text()
  );
  labels.push(text || "Item");
});

$("#out").text(
  "Direct: " + labels.join(" | ") + "\n" +
  "Skipped nested count: " + ($("ul.topnav li").length - labels.length)
);

Direct: Item 1 | Item 2 | Item 3
Skipped nested: Nested item 1, Nested item 2, Nested item 3

var direct = $("ul.topnav > li").length;
var all = $("ul.topnav li").length;

$("#out").text(
  "Direct children (>): " + direct + "\n" +
  "All descendants (space): " + all
);

Direct children (>): 3
All descendants (space): 6

$("#content > span").each(function () {
  $(this).text($(this).text() + " (direct)");
});

$("#out").text(
  "Direct spans: " + $("#content > span").length +
  " | All spans: " + $("#content span").length
);

Direct span (direct)
Nested span
Direct spans: 1 | All spans: 2

var labels = [];
$("nav.main > ul > li > a").each(function () {
  labels.push($(this).text());
});

$("#out").text("Top links: " + labels.join(", "));

Top links: Home, Products, Contact
(Sub-link A / Sub-link B are not matched)

var rows = [];
$("table.data > tbody > tr").each(function (i) {
  rows.push("Row " + (i + 1));
});

$("#out").text(
  "Main rows: " + rows.join(", ") +
  " | All tr in table: " + $("table.data tr").length
);

Main rows: Row 1, Row 2
All tr in table: 3
(Nested row is excluded by >)

Performance Notes

> is usually cheaper than a deep descendant walk because it only inspects first-level children. Start from a specific parent when you can.

Key Takeaways