:nth-of-type

The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
Suppose we have an unordered list and wish to “zebra-stripe” alternating list items:

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

li {
  background: slategrey;
}
/* select alternating items starting with the second item */
li:nth-of-type(2n) {
  background: lightslategrey;
}

Browse More Articles

Tweet

Written by KiranBloger

Experienced Webdesigner and SEO Consultant Specialist from Cochin, Kerala with over three years of experience in the field of Search Engine Optimization, SEO and Internet Marketing