Skip to content
Related Articles

Related Articles

jQuery :first Selector

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Jul, 2022
View Discussion
Improve Article
Save Article

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

It is a jQuery Selector that is used to select the first element of the specified type. 

Syntax:a

$(":first")

Return Value: It selects and returns the first element. 

Example 1: 

HTML




<!DOCTYPE html>
<html>
<head>
  <script src=
  </script>
  <script>
    $(document).ready(function () {
      $("p:first").css(
        "background-color", "green");
    });
  </script>
</head>
<body>
  <h1>
    <center>
      Geeks
    </center>
  </h1>
   
<p>Geeks for Geeks</p>
 
   
<p>jQuery</p>
 
   
<p>First Selector</p>
 
</body>
</html>

Output:

  

Example 2: 

HTML




<!DOCTYPE html>
<html>
<head>
  <script src=
  </script>
  <script>
    $(document).ready(function () {
      $("p:first").css(
        "background-color", "green");
    });
  </script>
</head>
<body>
  <h1>
    <center>
      Geeks
    </center>
  </h1>
  <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 Selector</p>
 
  </div>
   
<p>jQuery:First Selector</p>
 
</body>
</html>

Output:

  

Note: Above code will select only the first <p> element of first div. To select the first <p> element of second div use :first-child selector. 

Supported Browsers:

  • Google Chrome 90.0+
  • Internet Explorer 9.0
  • Firefox 3.6
  • Safari 4.0
  • Opera 10.5

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!