Difference between "nth-child" and "nth-of-type"

Let's say there is the following HTML code.

<p>Simple text</p>
<p>Selected text</p>
<p>Simple text</p>

In this code, you only need to select the second paragraph. This can be done through the pseudo-class :nth-child.

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

Example on JSFiddle

When, for example, the <h1> tag is added to the beginning, select elements will not happen as expected (example on JSFiddle).

Pseudo-class :nth-child checks every other child, and if it is a <p> tag, then it applies its styles.

If you need to apply a style only to a specific tag, then use the pseudo-class :nth-of-type.

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

Example on JSFiddle