mozilla
Your Search Results

    :nth-child Redirect 1

    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.

    This can more clearly be described this way: the matching element is the bth child of an element after all its children have been split into groups of a elements each.

    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, ... }.

    Among other things, this allows selectors 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.

    Odd Selector Example

    The following HTML...

        <div>
          <span>This span is limed!</span>
          <span>This span is not. :(</span>
          <em>This one is odd. </em>
          <span>Sadly, this one is not...</span>
          <span>But this one is!</span>
        </div>
    

    ...using this CSS...

        span:nth-child(2n+1) {
          background-color: lime;
        }
    

    ...will result in:

    Specifications

    Specification Status Comment
    Selectors Level 4 Working Draft No change.
    Selectors Level 3 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

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar