jQuery :first Selector Examples

Selecting the first matched element is very easy and it can be done by using a selector in jQuery. In this article, I am going to share different examples on how to use the :first selector in jQuery.

How to use the jQuery first Selector

Let’s see how to use the :first() selector by means of examples. Let us assume that we have few divs, list items & a table in our web page. Now we would like to select the first element of each of the different kinds of listed elements. Here’s how it can be done:

Common HTML Source code for all the following examples:

<style type="text/css">
.existing_yellow {
	background-color: #FFFF99;
	border: 1px solid #FF0;
}
.existing_purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.blue {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.red_text {
	color: #D70000;
	font-weight: bold;
}
.orange {	
	border: 10px solid #F90;
	color: #FFF;
	font-size: 200%;
	font-weight:bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
}
</style>

<div class="divs_container">

	<div id="my_div1">This is MY DIV 1

   	  <div id="my_div2" class="existing_yellow red_text">This is MY DIV 2</div>

    </div>

  <div id="my_div3" class="existing_purple">This is MY DIV 3</div>    

    <div id="my_div4" class="existing_yellow">This is MY DIV 4</div>    

	<p>&nbsp;</p>    

    <div id="main_div" class="blue">
    	This is MAIN DIV
    	<p>This is sub para 1</p>
    	<p>This is sub para 2</p>
    	<p>This is sub para 3</p>                    
    </div>

  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
  	</ul>

  <table width="100%" border="1" cellspacing="1" cellpadding="1">
      <tr>
        <td>R1C1</td>
        <td>R1C2</td>
        <td>R1C3</td>
        <td>R1C4</td>
      </tr>
      <tr>
        <td>R2C1</td>
        <td>R2C2</td>
        <td>R2C3</td>
        <td>R2C4</td>
      </tr>
      <tr>
        <td>R3C1</td>
        <td>R3C2</td>
        <td>R3C3</td>
        <td>R3C4</td>
      </tr>
      <tr>
        <td>R4C1</td>
        <td>R4C2</td>
        <td>R4C3</td>
        <td>R4C4</td>
      </tr>
  </table>
</div>

<p>	
<input type="submit" name="sbt_div_index" id="sbt_div_index" value="Add Green class to FIRST DIV">

<input type="submit" name="sbt_para_index" id="sbt_para_index" value="Add Green class to FIRST CHILD PARAGRAPH of MAIN DIV ">

<input type="submit" name="sbt_list_index" id="sbt_list_index" value="Add Green class to FIRST List Item">

<input type="submit" name="sbt_table_cells" id="sbt_table_cells" value="Add Green Class to FIRST Table Cell">

</p>

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

//Add all jQuery code here

});	

</script>

Example 1: Add class to the first div when a button is clicked

	$('#sbt_div_index').on("click", function(e){		

		$('.divs_container div:first').addClass('green');

		e.preventDefault();

	});

Example 2: Add class to the first child paragraph in a div when a button is clicked

	$('#sbt_para_index').on("click", function(e){		

		$('.divs_container #main_div p:first-child').addClass('green');

		e.preventDefault();

	});

Example 3: Add class to the first list item when a button is clicked

	$('#sbt_list_index').on("click", function(e){		

		$('.divs_container ul li:first').addClass('green');

		e.preventDefault();

	});

Example 4: Add class to the first table cell when a button is clicked

	$('#sbt_table_cells').on("click", function(e){				

		$('.divs_container table td:first').addClass('green');

		e.preventDefault();

	});

Simple, isn’t it?

Do you know of any other ways of using the jQuery first selector? Feel free to suggest by commenting below.