# :nth-child() Selector

Categories: Selectors > Child Filter

## nth-child selector

#### 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)` )

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

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.

### Examples:

#### Example: Finds the second li in each matched ul and notes it.

    <!DOCTYPE html>
    <html>
    <head>
      <style>

      div { float:left; }
      span { color:blue; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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>

#### Demo:

#### 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...

    <!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-1.7rc2.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>

#### Demo: