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>
  <p>1</p>
  <p>2</p>
</div>

 

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