:first-child JQ Home  <<  Selectors  <<  :first-child

First child selector.

Shorthand version $(':first-child')

Description

The (':first-child') selector, selects all first child elements of their parent.

If this selector is not preceded by another selector the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the example below to narrow the search and improve performance.

Syntax

Signature Description
jQuery(':first-child')First child match

Parameters

None.

Return

N/A.

:first-child Example Selectors  <<  Top

Selects all first child elements of their parent.

This method calls JavaScript's getElementsByTagName() function 'under the hood' to return the appropriate elements when used.

The following example will select the first 'code' elements within 'p' elements and change the text colour of these elements to red (top of page).




$(function(){
  $('#btn11').on('click', function() {
    $('p code:first-child').css('color', 'red');
  });
}); 


Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors