Repara no exemplo:
div>p {
font-family: Garamond;
color: brown;
text-decoration: underline;
}
p:first-child {
font-family: cursive;
color: blue;
}
<div>
<p>Primeiro</p>
<p>Segundo</p>
<p>Terceiro</p>
<section>
<p>Neto um</p>
<p>Neto dois</p>
<nav>
<span>Bisneto um</span>
<p>Bisneto dois</p>
</nav>
</section>
</div>
O seletor div > p
faz com que todos os filhos imediatos de div
recebam regras de css. No exemplo seriam os p
com texto: Primeiro, Segundo, Terceiro.
Essas regras não se propagam aos p
dentro de section
pois esses não são mais filhos imediatos de div
, mas sim "netos".
O seletor p:first-child
diz que todos os p
da página (independentemente de que pais tenham) que sejam o primeiro filho de um dado elemento, terão essas regras.
Repara que Primeiro
e Neto um
recebem essas regras, mas não Bisneto dois
isto apesar de ser o primeiro p
desse nível, mas é o segundo filho, não o primeiro.