:nth-last-child()S2C Home « Selectors « :nth-last-child()

Structural pseudo-class selector.

Shorthand version $(':nth-last-child(index/equation/even/odd)')

Description

The (':nth-last-child()') selector, selects all elements that are the nth last child of the specified parent, counting from the last element to the first.

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

Syntax


Signature Description
jQuery(':nth-last-child(index/equation/even/odd)')Structural pseudo-class match

Parameters


Parameter Description
index/equation/even/oddindex - index starting from 1   or
equation - to work out nth position   or
even - all even children   or
odd - all odd children.

Return

N/A.

:nth-last-child() Examplego to top of page Top

Selects all elements that are the nth-child of the specified parent, counting from the last element to the first.

In the example below when we press the left button we select all 'td' elements on the page that are the last child of their parents and change the background colour of these elements to yellow.

When the right button is pressed we will select all even children 'td' elements on the page and change the background colour of these elements to green. As we are using this particular selector we count from the right to the left, so the first 'td' elements above are turned green (2, 1 <---).


$(function(){
  $('#btn34').on('click', function() {
    $('td:nth-last-child(1)').css('backgroundColor', 'yellow');
  });
  $('#btn35').on('click', function() {
    $('td:nth-last-child(even)').css('backgroundColor', 'green');
  });
}); 

Press the button below to action the above code:

                 


go to home page Homepage go to top of page Top