Distinction Between 'Nth-Child' and 'Nth-of-Type'

In HTML

&lt;p&gt;0&lt;/p&gt;
&lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
&lt;p&gt;3&lt;/p&gt;
&lt;div&gt;4&lt;/div&gt;
&lt;div&gt;5&lt;/div&gt;
&lt;div&gt;6&lt;/div&gt;

The Selector div:nth-child(3) will choose the 3rd element from all elements in the level where div is, then check if the 3rd element is a ‘div’. In this case, the 3rd element is a ‘div’, so it works(<div>2</div>), but Selector div:nth-child(4) will select the 4st element which is ‘p’ (<p>3</p>), it’s not a ‘div’, so it doesn’t work.

However, the Selector div:nth-of-type(3) will choose the 3rd ‘div’ from all ‘div’s in the level where div is, so it choose the <div>4</div>.