Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    :nth-child

    Summary

    The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

    Some examples:

    • 1n+0, or simply n, would match every child element.
    • 2n+0, or simply 2n, would match child elements 2, 4, 6, 8, etc. You can substitute the keyword even for this expression.
    • 2n+1 would match child elements 1, 3, 5, 7, etc. You can substitute the keyword odd for this expression.
    • 3n+4 would match child elements 4, 7, 10, 13, etc.

    The values a and b must both be integers, and the index of an element's first child is 1. In other words, this class matches all children whose index fall in the set { an + b; n = 0, 1, 2, ... }.

    A common use case is to match every other row in a table.

    Syntax

    element:nth-child(an + b) { style properties }
    

    Examples

    Example selectors

    tr:nth-child(2n+1)
    Represents the odd rows of an HTML table.
    tr:nth-child(odd)
    Represents the odd rows of an HTML table.
    tr:nth-child(2n)
    Represents the even rows of an HTML table.
    tr:nth-child(even)
    Represents the even rows of an HTML table.
    span:nth-child(0n+1)
    Represents a span element which is the first child of its parent; this is the same as the :first-child selector.
    span:nth-child(1)
    Equivalent to the above.
    span:nth-child(-n+3)
    Matches if the element is one of the first three children of its parent and also a span.

    Full example

    The following HTML...

    <p><code>span:nth-child(2n+1)</code>, <em>without</em> an <code>&lt;em&gt;</code>
     inside the child elements. Children 1, 3, 5, and 7 are selected, as expected.</p>
    
    <div class="first">
          <span>This span is selected!</span>
          <span>This span is not. :(</span>
          <span>What about this?</span>
          <span>And this one?</span>
          <span>Another example</span>
          <span>Yet another example</span>
          <span>Aaaaand another</span>
    </div>
    
    <p><code>span:nth-child(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code>
     inside the child elements. Children 1, 5, and 7 are selected. 3 is used in the
     counting because it is a child, but it isn't selected because it isn't a 
    <code>&lt;span&gt;</code>.</p>
    
    <div class="second">
          <span>This span is selected!</span>
          <span>This span is not. :(</span>
          <em>This one is an em.</em>
          <span>What about this?</span>
          <span>And this one?</span>
          <span>Another example</span>
          <span>Yet another example</span>
          <span>Aaaaand another</span>
    </div>
    
    <p><code>nth-of-type(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code>
     inside the child elements. Children 1, 4, 6, and 8 are selected. 3 isn't
     used in the counting or selected because it is an <code>&lt;em&gt;</code>, 
    not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
     children of that type. The <code>&lt;em&gt;</code> is completely skipped
     over and ignored.</p>
     
      <div class="third">
          <span>This span is selected!</span>
          <span>This span is not. :(</span>
          <em>This one is an em.</em>
          <span>What about this?</span>
          <span>And this one?</span>
          <span>Another example</span>
          <span>Yet another example</span>
          <span>Aaaaand another</span>
    </div>
    

    ...using this CSS...

    html {
      font-family: sans-serif;
    }
    
    span, div em {
      padding: 10px;
      border: 1px solid green;
      display: inline-block;
      margin-bottom: 3px;
    }
        
    .first span:nth-child(2n+1),
    .second span:nth-child(2n+1),
    .third span:nth-of-type(2n+1) {
      background-color: lime;
    }

    ...will result in:

    Specifications

    Specification Status Comment
    Selectors Level 4
    The definition of ':nth-child' in that specification.
    Working Draft No change.
    Selectors Level 3
    The definition of ':nth-child' in that specification.
    Recommendation Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.1
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 1.0 (1.9.1) 9.0 9.5 3.1

    Notes

    • Opera can't handle dynamic insertion of elements.

    Document Tags and Contributors

    Last updated by: chrisdavidmills,