parent > child

child selector

Description: Selects all direct child elements specified by "child" of elements specified by "parent".

jQuery('parent > child')

version added: 1.0

parent

Element

Any valid selector.

child

Element

A selector to filter the child elements.

As a CSS selector, the child combinator is supported by all modern web browsers including Safari, Firefox, Opera, Chrome, and Internet Explorer 7 and above, but notably not by Internet Explorer versions 6 and below. However, in jQuery, this selector (along with all others) works across all supported browsers, including IE6.

The child combinator (E > F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.

Examples

Example 1

Finds all children of the element with id "main" which is yellow.

$("#main > *").css("border", "3px double red");

The output of the code above will be:

Try it yourself

Example 1 - Full source:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("#main > *").css("border", "3px double red");
  });
  </script>
  <style>
  body { font-size:14px; }
  span#main { display:block; background:yellow; height:110px; }
  button { display:block; float:left; margin:2px; 
           font-size:14px; }
  div { width:90px; height:90px; margin:5px; float:left;
        background:#bbf; font-weight:bold; }
  div.mini { width:30px; height:30px; background:green; }
  </style>
</head>
<body>
  <span id="main">
    <div></div>
    <button>Child</button>
    <div class="mini"></div>
    <div>
      <div class="mini"></div>
      <div class="mini"></div>
    </div>
    <div><button>Grand</button></div>
    <div><span>A Span <em>in</em> child</span></div>
    <span>A Span in main</span>
  </span>
</body>
</html>

Try it yourself

Example 2

Places a border around all list items that are children of <ul class="topnav">.

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

The output of the code above will be:

Try it yourself

Example 2 - Full source:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-size:14px; }
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
     $(document).ready(function(){
        $("ul.topnav > li").css("border", "3px double red");
     });
  </script>
</head>
<body>
<ul class="topnav">
    <li>Item 1</li>
    <li>Item 2 
        <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
       </li>
    <li>Item 3</li>
</ul>
</body>
</html>

Try it yourself

Was this information helpful?

Yes No

parent > child

child selector

jQuery('parent > child')

Examples

Example 1

Example 1 - Full source:

Example 2

Example 2 - Full source:

Comments