## nth-last-child selector

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

- #### version added: 1.9jQuery( ":nth-last-child(index/even/odd/equation)" )

  index: The index of each child to match, starting with the last one (`1`), the string `even` or `odd`, or an equation ( eg. `:nth-last-child(even)`, `:nth-last-child(4n)` )

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.

## 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 |
    <!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>

#### Demo:

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 |
    <!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>

#### Demo: