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.
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"><head> <meta charset="utf-8"> <title>nth-child demo</title> <style> div { float: left; } span { color: blue; } </style></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> |
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!doctype html><html lang="en"><head> <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></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> |
Please login to continue.