Child Selector (“parent > child”)

Categories: Selectors > Hierarchy

child selector

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

  • version added: 1.0jQuery( "parent > child" )

    parent: Any valid selector.

    child: A selector to filter the child elements.

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.

Example:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>child demo</title>
 <style>
 body {
 font-size: 14px;
 }
 </style>
 <script src="https://code.jquery.com/jquery-3.7.1.js"></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>
 
<script>
$( "ul.topnav > li" ).css( "border", "3px double red" );
</script>
 
</body>
</html>

Demo: