Wednesday, March 30, 2016

:nth-of-type

11:39:00 PM

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;
}

Written by

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

1 comments:

 

© 2013 Psd to Html Blog. All rights resevered. Designed by Templateism

Back To Top