jQuery :first Selector

jQuery Selectors

The :first selector selects the first matching DOM element.

It is usually used with another selector to select the first element in a group (as shown in the following examples).

Note: The :first selector can only select one element.

use:first-childThe selector selects the first child element of its parent.

Syntax:

$(":first")

Example

Select the first paragraph:

$(document).ready(function(){
　　$("p:first").css("background", "coral");
});

Select the first list item:

$(document).ready(function(){
　　$("li:first").css("background", "coral");
});

Select the first row:

$(document).ready(function(){
　　$("tr:first").css("background", "coral");
});

Display: first and :first-Difference between child selectors:

$(document).ready(function(){
　　$("#btn1").click(function(){
　　　　$("p:first").css("background-color", "coral");
　　});
　　$("#btn2").click(function(){
　　　　$("p:first-child").css("background-color", "lightgreen");
　　});
});

jQuery Selectors