Hva er forskjellen på :nth-child og :nth-of-type?

<div>
   <p>Avsnitt 1</p>
   <p>Avsnitt 2</p>    <!-- Avsnitt 2 skal formateres -->
</div>

Vi kan formatere avsnitt 2 med både :nth-child og :nth-of-type.

p:nth-child(2) { color: #930; font-weight: bold; }

p:nth-of-type(2) { color: #930; font-weight: bold; }

Hva om vi endrer litt på HTML-koden:

<div>
	<h1>Overskrift</h1>
   	<p>Avsnitt 1</p>
   	<p>Avsnitt 2</p>    <!-- Avsnitt 2 skal formateres -->
</div>

Da vil :nth-child formatere avsnitt 1 istedenfor avsnitt 2, siden det er element nr 2 OG det er en <p>. Legger vi til enda flere elementer foran avsnitt 1 i koden over vil altså ingen av avsnittene bli formatert med :nth-child.

p:nth-child(2) { color: #930; font-weight: bold; } /* formaterer nå avsnitt 1 istedenfor avsnitt 2 */

Mens :nth-of-type fortsatt fungerer som vi ønsker og formaterer avsnitt 2, siden den retter seg mot type, altså <p>.

p:nth-of-type(2) { color: #930; font-weight: bold; }

Hvilke nettlesere støtter dette?