:nth-child()

Not supported by IE, Firefox and Safari.

The :nth-child() and :nth-of-type() pseudo-classes allows you to select elements with a formula.

The syntax is :nth-child(an+b), where you replace a and b by numbers of your choice. For instance, :nth-child(3n+1) selects the 1st, 4th, 7th etc. child.

:nth-of-type() works the same, except that it only considers element of the given type (<li> in the example).

Test sheet:

ol > :nth-child(3n+1) {
	color: red;
}

li:nth-of-type(5n+2) {
	color: blue;
}

Test

The paragraphs count for the :nth-child() selector, but not for the :nth-of-type() selector.

  1. List item

    2. Paragraph

  2. List item
  3. List item
  4. List item
  5. List item

    6. Paragraph

  6. List item
  7. List item
  8. List item
  9. List item
  10. List item
  11. List item
  12. List item
  13. List item

Add a list item.