jQuery Child Selector (“parent > child”)

What You’ll Learn

The child selector uses the > combinator to match direct children only — not grandchildren or deeper descendants. Available since jQuery 1.0; ideal for navigation menus, nested lists, and any markup where depth matters.

Introduction

Real HTML is nested — lists inside lists, divs inside divs, tables inside tables. When you write $("ul li"), jQuery matches every list item at any depth. Sometimes that is what you want; often it is not.

The child combinator > narrows the search to immediate children only. Official jQuery documentation describes it as a more specific form of the descendant combinator: it selects first-level descendants and stops there. This tutorial walks through the official ul.topnav > li demo and practical patterns you will use in menus, layouts, and data tables.

Understanding the Child Selector

Think of parent > child as a one-step relationship: “Is this element a direct child of that parent?”

• ul.topnav > li → top-level items only; nested sub-list items are skipped.
• div > span → spans whose parent is a div; spans inside nested divs may not match.
• nav > ul > li → walk the tree one level at a time.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "parent > child" )



// common patterns:

$( "ul.topnav > li" )

$( "div.panel > p" )

$( "nav > ul > li > a" )

$( "#sidebar > section" )

Parameters

• parent — any valid selector for the parent element(s).
• child — a selector to filter the direct child elements.

Return value

• A jQuery object containing every element that is a direct child of a matched parent.
• Deeper descendants are excluded even if they match the child selector.

Official jQuery API example

// Places a border around all list items that are direct children of ul.topnav

$( "ul.topnav > li" ).css( "border", "3px double red" );

Examples Gallery

Example 1 follows the official jQuery ul.topnav > li demo. Examples 2–5 compare child vs descendant selectors, style direct spans, target top-level nav links, and select table body rows. Use the Try-it links to run each snippet.

$( "ul.topnav > li" ).css( "border", "3px double red" );



// Item 2 contains a nested ul — those inner li elements are NOT matched

Item 1, Item 2, Item 3 → red double border

Nested item 1, 2, 3 inside Item 2 → no border

console.log( "Direct children:", $( "ul.topnav > li" ).length );

console.log( "All descendants:", $( "ul.topnav li" ).length );



// > = 3 top-level items; space = 6 items including nested ones

Direct children: 3

All descendants: 6



The space combinator includes nested sub-menu items

$( "#content > span" ).css( "font-weight", "bold" );



// Only "Direct span" matches — not spans inside #inner

"Direct span" → bold

"Nested span" inside inner div → normal weight

$( "nav.main > ul > li > a" ).addClass( "top-link" );



// Dropdown links inside nested ul are excluded

Home, Products, Contact → class "top-link"

Sub-link A, Sub-link B in dropdown → no class

$( "table.data > tbody > tr" ).addClass( "data-row" );



// Rows inside a nested table within a cell are not matched

Row 1, Row 2 → class "data-row"

Nested table rows → no class

🚀 Common Use Cases

• Navigation menus — style top-level items without affecting dropdown sub-items.
• Nested lists — count or highlight only first-level li elements.
• Card grids — select direct column children in a flex or grid container.
• Form sections — target inputs that are immediate children of a fieldset.
• Data tables — operate on main tbody rows, skip nested detail tables.
• Component shells — apply layout rules to direct wrapper children only.

📝 Notes

• Available since jQuery 1.0 — standard CSS child combinator syntax.
• The child combinator is more specific than the descendant (space) combinator.
• Official docs: E > F selects only first-level descendants of E.
• Whitespace around > is optional: div>span and div > span both work.
• Equivalent traversal: $("#parent").children("child").
• jQuery made > work in browsers where native CSS support was limited (e.g. old IE).

💡 Best Practices