Notice the example:
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>
The div > p
selector causes all immediate children of div
to receive css rules. In the example would be p
with text: First, Second, Third.
These rules do not propagate to p
within section
because they are no longer immediate children of div
, but rather "grandchildren."
The p:first-child
selector says that all p
of the page (regardless of which country they are) are the first child of a given element, will have these rules.
Notice that Primeiro
and Neto um
receive these rules, but not Bisneto dois
this despite being the first p
of that level, but it is the second child, not the first one.