:first-of-type JQ Home  <<  Selectors  <<  :first-of-type

• <<    :first-child Selector
• :last-child Selector     >>

First of child type selector.

Shorthand version $(':first-of-type')

Description

The :first-of-type selector, selects the first element types that have no other element with both the same parent and the same element name coming before it in the document tree.

• 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 examples below to narrow the search and improve performance.

Syntax

Parameters

None.

Return

N/A.

:first-of-type Examples Selectors  <<  Top

Selects all elements that are the first among siblings of the same element name.

The following example will check for the first 'h2' element within the document and turn the background colour yellow (top of left sidebar).

$(function(){
  $('#btn1').on('click', function() {
    $("h2:first-of-type").css('backgroundColor', 'yellow'); 
  });
}); 

The following example will check for the first 'form' element within the document and turn the background colour orange (above form).

$(function(){
  $('#btn2').on('click', function() {
    $("form:first-of-type").css('backgroundColor', 'orange'); 
  });
}); 

The following example will check for the first 'h2' element within the document and turn the background colour yellow (first preformatted code above).

$(function(){
  $('#btn3').on('click', function() {
    $("pre:first-of-type").css('backgroundColor', 'silver'); 
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    :first-child Selector
• :last-child Selector     >>