E:nth-last-child

Matches an E element, the n-th child of its parent, counting from the last one (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-last-child(2){font-style:italic}
  3. p:nth-last-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 to last paragraph should be set in italics and the sixth, fourth and second (odd) should be green.