nth-child selector Description: Selects all elements that are the nth-child of their parent. version added: jQuery( ":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 containing two s, $( "li:nth-child(1)" ) selects the first 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 . Examples: 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 36 37 38 39 40 41 42 43 44 <!doctype html> <html lang="en"> <meta charset="utf-8"> <title>nth-child demo</title> <style> div { float: left; }span { color: blue; } </style> <script src=" <script> $( "ul li:nth-child(2)" ).append( " - 2nd!" ); </script> Demo: 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 4344 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 82 83 <!doctype html> <html lang="en"> <meta charset="utf-8"> <title>nth-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=" <button>:nth-child(even)</button> <button>:nth-child(odd)</button> <button>:nth-child(3n)</button> <button>:nth-child(2)</button>
<button>:nth-child(3n+1)</button><button>:nth-child(3n+2)</button> <button>:even</button> <button>:odd</button>
| John |
| Karl |
| Brandon |
| Benjamin |
| Glen |
| Tane |
| Ralph |
| David |
| Mike |
| Dan |
tr<span id="inner"><script> $( "button" ).click(function() { var str = $( this ).text(); $( "tr" ).css( "background", "white" ); $( "tr" str ).css( "background", "#ff0000" ); $( "#inner" ).text( str ); }); </script> Demo: 
