jQuery parent > child Selector

jQuery | parent > child Selector: Learn about the parent > child Selector with its usages, syntax, examples.
Submitted by Pratishtha Saxena, on December 02, 2022

parent > child Selector

In jQuery, selectors are a parameter through which we can select the HTML element. Selectors can comprise – class names, ids, tag names, attributes, etc. Basically, by using selectors, the appropriate HTML-DOM element can be selected and hence performed actions on it. Here, we are discussing about the jQuery parent > child Selector.

The jQuery parent > child selector allows us to select the direct child of the specified parent tag. If the parent tag specified is 'p' and the child specified is 'span', then all the direct children of the parent tag will be selected.

This selector helps in selection of all the similar elements within a tag in a go. The parent and child here are referred to as the tag name to be considered respectively.

parent > child Selector Syntax

$('parent > child');

Once the elements are selected, you can access them and perform the actions that you want to perform on them. The example given below shows the selection of the specific child elements of the parent element on click by passing the appropriate selector.

jQuery parent > child Selector Example

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  </head>
  
  <body>
    <h2>jQuery - Parent > Child Selector</h2>
    <p>Click the button to get the direct child element of the parent tag specified.</p>
    <button>Click Here</button>
    <hr>
    <div>
      <p>Welcome to Include Help !</p>
      <span>This is a jQuery Tutorial.</span>
      <p>We are discussing about the parent > child selector.</p>
      <p>Thanks for Visiting !</p>
    </div>
    <hr>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $("div > p").css({"color":"red", "font-weight":"bold"});
        });
    });
  </script>
</html>

Output:

Example 1: jQuery parent > child Selector

jQuery :nth-last-of-type Selector

jQuery parent descendant Selector

Comments and Discussions!

Load comments ↻