-->

jQuery :first-child Selector

By: Bipin C Mathew 9 months ago

The :first-child selector lets you select every element that is the first child of a parent element while th :first selector selects only the first one from the element set. We use the.prepend() method to insert the element as a first child using jQuery.

Syntax  $(":first-child")

Example

<!doctype html>
	<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>first-child demo</title>
	  <style>
	  span {
	    color: #008;
	  }
	  span.sored {
	    color: red;
	    font-weight: bolder;
	  }
	  </style>
	  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	</head>
	<body>
	 
	<div>
	  <span>Sibin,</span>
	  <span>Jobby,</span>
	  <span>Bobby</span>
	</div>
	<div>
	  <span>Kevin,</span>
	  <span>Shorn,</span>
	  <span>Ginu</span>
	</div>
		 
		<script>
	$( "div span:first-child" )
	  .css( "text-decoration", "underline" )
	  .hover(function() {
	    $( this ).addClass( "sored" );
	  }, function() {
	    $( this ).removeClass( "sored" );
	  });
	</script>
	 
	</body>
	</html>

Comments

Let us talk!

We take the vision which comes from dreams and apply the magic of science and mathematics, adding the heritage of our profession and our knowledge to create a design.