How to use nth-child

Standard

There is a CSS selector, really a pseudo-selector, called nth-child.

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.

This example selector will match any paragraph that’s the first child element of its parent element (This is, of course, equivalent to the selector p:first-child):

p:nth-child(1) {
/*declarations*/
}

Using a formula (an + b).
Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

If you want to specify a color for all p elements whose index is a multiple of 3:

p:nth-child(3n+0) {
color: SteelBlue;
}

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