jQuery | :first-child Selector

It is a jQuery Selector used to select every element that is the first child of its parent.

Syntax:

$(":first-child")

Return Value: It selects and returns the first child element of its parent.

Example-1:

<!DOCTYPE html> 
<html> 
<h1> 
  <center> 
    Geeks  
  </center> 
  </h1> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
  </script> 
    <script> 
        $(document).ready(function() { 
            $("p:first-child").css( 
              "background-color", "green"); 
        }); 
    </script> 
</head> 
  
<body> 
<div> 
    <p>Geeks for Geeks</p> 
    <p>jQuery</p> 
    <p>First Child Selector</p> 
</div> 
</body> 
  
</html> 

Output:

Example-2:

<!DOCTYPE html> 
<html> 
<h1> 
  <center> 
    Geeks  
  </center> 
  </h1> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
  </script> 
    
  <script> 
        $(document).ready(function() { 
            $("p:first-child").css( 
              "background-color", "green"); 
        }); 
    </script> 
</head> 
  
<body> 
    <div style="border:1px solid;"> 
        <p>Geeks for Geeks</p> 
        <p>jQuery</p> 
    </div> 
    <br> 
  
    <div style="border:1px solid;"> 
        <p>Geeks for Geeks</p> 
        <p>jQuery</p> 
        <p>First Child Selector</p> 
    </div> 
  
    <div>jQuery:First Child Selector</div> 
  
</body> 
  
</html> 

Output:

My Personal Notes

Recommended Posts:

Code_Mech

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.

Suggest a Topic

Recommended Posts: