:nth-child() Selector
Categories: Child Filter
jQuery(':nth-child(index/even/odd/equation)')
Description: Selects all elements that are the nth-child of their parent.
-
jQuery(':nth-child(index/even/odd/equation)')
version added: 1.0index 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-child(n)
is strictly derived from the CSS specification, the value of n
is "1-indexed", meaning that the counting starts at 1. For all other selector expressions, however, jQuery follows JavaScript's "0-indexed" counting. Therefore, 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.
-
Finds the second li in each matched ul and notes it.
HTML:
<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>
CSS:
div { float:left; } span { color:blue; }
Code:
$("ul li:nth-child(2)").append("<span> - 2nd!</span>");
-
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...
HTML:
<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>
CSS:
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; }
Code:
$("button").click(function () { var str = $(this).text(); $("tr").css("background", "white"); $("tr" + str).css("background", "#ff0000"); $("#inner").text(str); });