:nth-last-of-type()S2C Home « Selectors « :nth-last-of-type()
Structural pseudo-class selector.
Shorthand version $(':nth-last-child(index/equation/even/odd)')
Description
The (':nth-last-of-type()') selector, selects all elements that are the nth last of type 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 examples below to narrow the search and improve performance.
Syntax
| Signature | Description |
|---|---|
jQuery(':nth-last-of-type(index/equation/even/odd)') | Structural pseudo-class match |
Parameters
| Parameter | Description |
|---|---|
index/equation/even/odd | index - 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-of-type() ExamplesTop
Selects all elements that are the nth last of type child of the specified parent, counting from the last element to the first.
In the example below when we press the button we select all odd children 'td' elements on the page that are the last of type child of their parents and change the background colour of these elements to orange. As we are using this particular selector we count from the right to the left, so the second 'td' elements above are turned orange (2, 1 <---). Within the footer below the first and third elements 'td' are turned orange (we are counting backwards and index starts at 1).
$(function(){
$('#btn1').on('click', function() {
$('td:nth-last-of-type(odd)').css('backgroundColor', 'orange');
});
});
In the example below when we press the button 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 <---). Within the footer below the second 'td' element is turned green (we are counting backwards and index starts at 1).
$(function(){
$('#btn2').on('click', function() {
$('td:nth-last-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 last 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-last-of-type(1)').css('backgroundColor', 'silver');
});
});