Selects all elements that are the nth-child of their parent, 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-child(1)" )
selects the third, last, <li>
.
Further discussion of this usage can be found in the W3C CSS specification.
jQuery( ":nth-last-child(index/even/odd/equation)" )
version added: 1.9
Examples:
Find the second to last li in each matched ul and note it.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>nth-last-child demo</title> <style> div { float: left; } span { color: blue; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </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-child(2)" ).append( "<span> - 2nd to last!</span>" ); </script> </body> </html>
This is a playground to see how the selector works with different strings.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>nth-last-child 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> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div> <button>:nth-last-child(even)</button> <button>:nth-last-child(odd)</button> <button>:nth-last-child(3n)</button> <button>:nth-last-child(2)</button> </div> <div> <button>:nth-last-child(3n+1)</button> <button>:nth-last-child(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.