jQuery :first Selector
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
.png)
