:nth-child() Selector

jQuery

previous page next page

:nth-child() Selector

Categories: Selectors > Child Filter

nth-child selector

Description: Selects all elements that are the nth-child of their parent.

  • version added: 1.1.4jQuery( ":nth-child(index/even/odd/equation)" )

    index: The index of each child to match, starting with 1, the string even or odd, or an equation ( eg. :nth-child(even), :nth-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 two <li>s, $('li:nth-child(1)') selects the first <li> while $('li:eq(1)') selects the second.

The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.

Further discussion of this unusual usage can be found in the W3C CSS specification.

Examples:

Example: Find the second 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
 
                                  

                                    

                                      
                                        <!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>Brandon</li>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        </ul>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                      
                                    

                                  

                                  

                                    

                                        <ul>
                                    

                                  

                                  

                                    

                                          <li>Sam</li>
                                    

                                  

                                  

                                    

                                        </ul>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                      
                                    

                                  

                                  

                                    

                                        <ul>
                                    

                                  

                                  

                                    

                                          <li>Glen</li>
                                    

                                  

                                  

                                    

                                          <li>Tane</li>
                                    

                                  

                                  

                                    

                                          <li>Ralph</li>
                                    

                                  

                                  

                                    

                                          <li>David</li>
                                    

                                  

                                  

                                    

                                        </ul>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("ul li:nth-child(2)").append("<span> - 2nd!</span>");
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: This is a playground to see how the selector works with different strings. Notice that this is different from the :even and :odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...

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
 
                                  

                                    

                                      
                                        <!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-child(even)</button>
                                    

                                  

                                  

                                    

                                        <button>:nth-child(odd)</button>
                                    

                                  

                                  

                                    

                                        <button>:nth-child(3n)</button>
                                    

                                  

                                  

                                    

                                        <button>:nth-child(2)</button>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                      
                                    

                                  

                                  

                                    

                                        <button>:nth-child(3n+1)</button>
                                    

                                  

                                  

                                    

                                        <button>:nth-child(3n+2)</button>
                                    

                                  

                                  

                                    

                                        <button>:even</button>
                                    

                                  

                                  

                                    

                                        <button>:odd</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