:nth-of-type() JQ Home  <<  Selectors  <<  :nth-of-type()

• <<    :nth-last-of-type() Selector
• :only-child Selector     >>

Structural pseudo-class selector.

Shorthand version $(':nth-of-type(index/equation/even/odd)')

Description

The (':nth-of-type()') selector, selects all elements that are the nth child of their parent relative to siblings with the same element name.

• Be aware that unlike all other selectors and JavaScript generally which is zero-index based the index for nth selectors start at 1. So as an example the first element selected will be odd and not even because of this.
• 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

Return

N/A.

:nth-of-type() Examples Selectors  <<  Top

Selects all elements that are the nth child of their parent relative to siblings with the same element name.

In the example below when we press the button we select all odd children 'td' elements on the page that are the nth of type child of their parents and change the background colour of these elements to orange.

$(function(){
  $('#btn1').on('click', function() {
    $('td:nth-of-type(odd)').css('backgroundColor', 'orange');
  });
}); 

In the example below when we press the button we select all even children 'td' elements on the page that are the nth of type child of their parents and change the background colour of these elements to green.

$(function(){
  $('#btn2').on('click', function() {
    $('td:nth-of-type(even)').css('backgroundColor', 'green');
  });
}); 

In the example below when we press the button we select all 'span' elements on the page that are nth of type and change the background colour to silver. This will change all the 'h4 span' in the left sidebar.

$(function(){
  $('#btn3').on('click', function() {
    $('h4 span:nth-of-type(1)').css('backgroundColor', 'silver');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    :nth-last-of-type() Selector
• :only-child Selector     >>