E:nth-child

Matches an E element, the n-th child of its parent. (Source: W3C)

HTML:

  1. <div>
  2. <p>Lorem ipsum dolor sit amet, consectetur</p>
  3. <p>Lorem ipsum dolor sit amet, consectetur</p>
  4. <p>Lorem ipsum dolor sit amet, consectetur</p>
  5. </div>

CSS:

  1. p{font-style:normal}
  2. p:nth-child(2){font-style:italic}
  3. p:nth-child(odd){color:green}

Output:

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

In the example, the second paragraph should be set in italics and the first, third and fifth (odd) should be green.