:nth-last-child() Selector

jQuery

previous page next page

:nth-last-child() Selector

Categories: Selectors > Child Filter

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:

Example: 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
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        div { float:left; }
                                    

                                  

                                  

                                    

                                        span { color:blue; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.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>

Example: 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
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <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="http://code.jquery.com/jquery-latest.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>
 POWERED BYHERONOTE
previous page start next page