jQuery Tutorial Tutorials - jQuery parent > child selector

The Child selector selects all direct child elements of parent.
The child combinator (P > C) selects only first-level descendants. It is equivalent to $('parent').children('child').

jQuery Child selector Syntax

$('parent > child')

jQuery Child selector Examples

In following example,It would select all list items that are children of <ul id="navList"> and place a border around them. But the order list items would be selected because they are not the first-level descendants.

example:Select elements using jQuery child selector

<style>li{margin:10px}</style>
<ul id="navList">
    <li>
        <ol>
            <li>order list item</li>
            <li>order list item</li>
            <li>order list item</li>
        </ol>
    </li>
    <li>un-order list item</li>
    <li>un-order list item</li>
</ul>
<script>
    $('#navList > li').css('border','2px solid coral');
</script>

Try now

if we remove >, all li (all descendant) elements will be selected. This is called descendant selector:

<style>li{margin:10px}</style>
<ul id="navList">
    <li>
        <ol>
            <li>order list item</li>
            <li>order list item</li>
            <li>order list item</li>
        </ol>
    </li>
    <li>un-order list item</li>
    <li>un-order list item</li>
</ul>
<script>
    $('#navList li').css('border','2px solid coral');
</script>

Try now