# :nth-child() Selector

## nth-child ( index ) version added: 1.1.4

- index
  Type: Number/String
  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-` 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.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        float: left;
      }
      span {
        color: blue;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.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 lang="en">
    <head>
      <meta charset="utf-8">
      <title>css 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="//code.jquery.com/jquery-1.10.2.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: