Description

This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements of the same type. This 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-of-type(N) matches elements that are preceded by N-1 siblings with the same element name in the document tree.

The following example selector matches the second, fifth, eighth, and so on, paragraphs in a div element, ignoring any children that aren’t paragraphs:

div>p:nth-of-type(3n-1) {
  ⋮ declarations
}

The following example selectors will allow the application of different CSS styles to the odd- and even-numbered image elements that are children of the element whose id attribute value matches "gallery":

#gallery>img:nth-of-type(odd) {
  ⋮ declarations
}
#gallery>img:nth-of-type(even) {
  ⋮ declarations
}