:nth-child(N) (CSS selector)

 In Blog

This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements.

The pseudo-class accepts an argument, N, which can be a keyword, a number, or a number expression of the form an+b. For more information, see Understanding :nth-child Pseudo-class Expressions.

If N is a number or a number expression, :nth-child(N) matches elements that are preceded by N-1 siblings in the document tree.

The following example selectors are equivalent, and will match odd-numbered table rows:

tr:nth-child(2n+1) {
⋮ declarations
}
tr:nth-child(odd) {
⋮ declarations
}

This example selector will match the first three rows of any table:

tr:nth-child(-n+3) {
⋮ declarations
}

This example selector will match any paragraph that’s the first child element of its parent element:

p:nth-child(1) {
⋮ declarations
}

This is, of course, equivalent to the selector p:first-child:

tr:nth-child(odd) {
⋮ declarations
}

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search

Personal CloudInputs not editable with jQuery UI Draggable?