:nth-of-type

The :nth-of-type(an+b) CSS pseudo-class matches an element that has an+b-1 siblings of the same type before it, where n is positive or zero.

/* Selects every fourth <div> inside a parent element */
div:nth-of-type(4n) {
  background-color: lime;
}

See :nth-child for a more thorough description of the syntax of its argument.

Syntax

:nth-of-type( <nth> )
where 
<nth> = <an-plus-b> | even | odd

Example

CSS

/* Align odd paragraphs to the left */
p:nth-of-type(2n+1) { text-align: left; }
/* Align even paragraphs to the right */
p:nth-of-type(2n) { text-align: right; }

HTML

<div>
    <div>This element isn't counted.</div>
    <p>First paragraph. (left aligned)</p>
    <p>Second paragraph. (right aligned)</p>
    <div>This element isn't counted.</div>
    <p>Third paragraph. (left aligned)</p>
</div>

Result

Specifications

Browser compatibility

See also

• :nth-child
• :nth-last-of-type