CSS: nth-of-type()

When you need to select the nth number of an element. This differs from nth-child because nth-child will select the nth child of a parent whereas nth-of-type will select the nth of the type of element.

Take this piece of code for example:

<div class="parent">
  <h2>Hi There</h2>


nth-child will select <p>1</p>

p:nth-child(2) {
  color: red;


nth-of-type will select <p>2</p>

p:nth-of-type(2) {
  color: red;