Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.
Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript's "0-indexed" counting. Given a single <ul> containing three <li>s, $('li:nth-last-of-type(1)') selects the third, last, <li>.
Further discussion of this usage can be found in the W3C CSS specification.
jQuery( ":nth-last-of-type(index/even/odd/equation)" )
version added: 1.9
Examples:
Find the second to last li in each matched ul and note it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>nth-last-of-type demo</title> <style> div { float: left; } span { color: blue; } </style></head><body> <div> <ul> <li>John</li> <li>Karl</li> <li>Adam</li> </ul></div><div> <ul> <li>Dan</li> </ul></div><div> <ul> <li>Dave</li> <li>Rick</li> <li>Timmy</li> <li>Gibson</li> </ul></div> <script>$( "ul li:nth-last-of-type(2)" ).append( "<span> - 2nd to last!</span>" );</script> </body></html> |
This is a playground to see how the selector works with different strings.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>nth-last-of-type demo</title> <style> button { display: block; font-size: 12px; width: 100px; } div { float: left; margin: 10px; font-size: 10px; border: 1px solid black; } span { color: blue; font-size: 18px; } #inner { color: red; } td { width: 50px; text-align: center; } </style></head><body> <div> <button>:nth-last-of-type(even)</button> <button>:nth-last-of-type(odd)</button> <button>:nth-last-of-type(3n)</button> <button>:nth-last-of-type(2)</button></div><div> <button>:nth-last-of-type(3n+1)</button> <button>:nth-last-of-type(3n+2)</button></div> <div> <table> <tr><td>John</td></tr> <tr><td>Karl</td></tr> <tr><td>Brandon</td></tr> <tr><td>Benjamin</td></tr> </table></div><div> <table> <tr><td>Sam</td></tr> </table></div><div> <table> <tr><td>Glen</td></tr> <tr><td>Tane</td></tr> <tr><td>Ralph</td></tr> <tr><td>David</td></tr> <tr><td>Mike</td></tr> <tr><td>Dan</td></tr> </table></div> <span>tr<span id="inner"></span></span> <script>$( "button" ).click(function() { var str = $( this ).text(); $( "tr" ).css( "background", "white" ); $( "tr" + str ).css( "background", "#ff0000" ); $( "#inner" ).text( str );});</script> </body></html> |
Please login to continue.